1.需求说明
2.实现思路
3.el-upload组件主要属性说明
4.前端传递MultipartFile数组与服务端接收说明
5.完整代码
1.需求说明
动态模块新增添加动态功能,支持多张图片上传.实现过程中对el-upload组件不是很熟悉,踩了很多坑,当然也参考过别的文章,发现处理很复杂.这里记录最终实现结果,方便有同样问题的同学查看,避免浪费多余时间.下面是发布动态的页面,点击上传图片打开本地文件选择,点击确定完成动态发布功能.
2.实现思路
多张图片上传逻辑(兼容单张图片上传,只需要修改最大上传图片数量为1):
1.需要页面选择好所有图片之后调用服务端的图片上传接口,这样处理的原因是图片上传过程中会出现几种场景:
选择好图片之后要删除之前选择的某一张或某几张;
选择好图片之后要追加几张图片
如果按照选择一张就调用一次图片上传接口,不但会增加服务端调用次数,而且还会增加无效图片的存储成本.
2.多张图片一次上传接口调用成功后返回多张图片的图片地址,再调用服务端动态发布接口,完成动态发布功能
3.el-upload组件主要属性说明
1.禁用选择图片自动上传功能
action属性:图片上传服务端请求地址,在组件中属于必传,默认选择一张图片就要调用一次.按照上面梳理的逻辑需要禁用调用该功能,auto-upload设置为false即可.action由于是必传,所以此处设置为#
2.开启多选
设置multiple设置为true,默认false,否则在出现的文件选择窗口中只能选择一个文件.
3.设置选择文件最大数量
使用limit属性,超过最大数量的处理逻辑可以在on-exceed中实现,其中处理的逻辑是页面提示已超过最大数请重新选择.
4.显示已选择的图片列表
设置file-list实现
5.选择好图片之后追加几张图片问题处理
on-change可以监听选中的图片,一次性选择多个图片会执行多次,但是为保证业务处理逻辑执行成功,只需要最后一次on-change中添加业务处理,所以通过判断监听返回的fileList集合长度是否是最大来处理.自定义的fileList就是on-change中最后一次on-change监听返回的fileList集合信息.下文中自定义的imgUrlList为调用文件上传服务端组装的图片参数集合.服务端的file对象对应on-change监听file中的file.raw.
handleChange(file, fileList){let length = fileList.length this.maxLength = Math.max(length, this.maxLength)setTimeout(() => {if(length !== this.maxLength) {return} else {this.fileList=fileList}})}
6.选择好图片之后删除已选中图片问题处理
before-remove可以监听要进行删除的图片信息.每个图片中有一个唯一标识uid,通过唯一标识删除自定义fileList中的图片
handleRemove(file, fileList){this.fileList=this.fileList.filter(imgFile=>imgFile.uid != file.uid)},
4.前端传递MultipartFile[]与服务端接收说明
服务端接口为post请求,请求方式为post表单提交.具体如下
@PostMapping("/uploadImg")public ResultVo uploadImg(@RequestParam(name = "multipartFiles") MultipartFile[] multipartFiles,@RequestParam(name = "fileType") Integer fileType) {String url = adminDriftService.adminUploadImg(multipartFiles,fileType);return ResultVoUtil.success(url);}
前端页面需要按照FormData类型进行传递,注意一下参数拼接:
let formData = new FormData();this.imgUrlList.map(img=>{formData.append("multipartFiles", img)})formData.append("fileType", 2)
5.完整代码
前端:
dynamic.js:
export function uploadImg(formData) {return axios({url: 'uploadImg',method: 'POST', data: formData})
}
新增动态弹窗:
<el-dialog title="新增动态" :visible.sync="addDynamicVisible">
