若依移动端上传文件

上传图片

1、上传组件

<uni-section title="只选择图片" type="line">
    <view class="example-body">
        <uni-file-picker 
            limit="8"
            title="最多选择8张图片,且格式必须为.png .jpg"
			v-model="imageValue" 
            fileMediatype="image" 
            file-extname="png,jpg" 
            mode="grid" 
            @select="select" />
    </view>
</uni-section>

2、vue

<script>
	import config from '@/config'
	import { getToken } from '@/utils/auth'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
                // 表单数据
				formData: {
					// 图片列表
                    images: [],
				},
				// 上传的图片的回显容器
				imageValue: [],
			}
		},
		methods: {
			// 获取上传状态
			select(e) {
				const tempFilePaths = e.tempFilePaths;
				// 上传图片
				tempFilePaths.forEach(item => {
					uni.uploadFile({
						url: baseUrl + "/common/upload",
						// 上传的文件
						filePath: item,
						name: 'file',
						formData: {
						},
						// 请求头，设置token
						header: {
							'Authorization': getToken()
						},
						// 上传成功的回调函数
						success: (uploadFileRes) => {
							// 将上传的文件地址保存
						    this.formData.images[this.formData.images.length] = JSON.parse(uploadFileRes.data).fileName;
						}
					});
				})
			},
		}
	}
</script>

删除上传的图片同时删除服务器文件

1、Java

11.1、CommonController

/**
 * 根据文件后缀路径配删除服务器文件
 * @param path 文件后缀路径
 * @return
 */
@PostMapping("/delFile")
public AjaxResult delFile(@RequestBody String path){
    // 上传文件路径
    String filePath = TitanConfig.getUploadPath();
    // 拼接文件路径
    String url = filePath + path;
    // 刪除文件
    if (FileUploadUtils.delFile(filePath + path)) {
        return AjaxResult.success("文件删除成功");
    }else {
        return AjaxResult.error("删除失败");
    }
}

1.2、FileUploadUtils

/**
 * 根据文件路径删除文件
 * @param filePath
 * @return
 */
public static final boolean delFile(String filePath) {
    String[] split = filePath.split("/profile/upload");
    String url = split[0] + split[1];
    File file = new File(url);
    if (file.exists()) {
        return file.delete();
    } else {
        throw new ServiceException("文件不存在");
    }
}

2、HTML

<uni-section title="只选择图片" type="line">
    <view class="example-body">
        <uni-file-picker @delete="del" ></uni-file-picker>
	</view>
</uni-section>

3、JS

// 删除
del(e) {
    // 删除服务器代码
    delFile(this.formData.productImages[e.index]).then(resp => {
        console.log(resp)
    })
}

4、API

import request from '@/utils/request'

// 删除单个文件
export function delFile(data) {
  return request({
    url: '/common/delFile',
	method: 'post',
    data: data
  })
}