一、项目背景
在项目中采用了admin模板，和elementUI组件。需求为手动选择文件可多选上传并显示图片
效果图为
二、自定义上传中遇到的问题
| http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — |
在文档中存在这样一个自定义上传，但是在使用过程中出现了一些问题，
自定义上传函数不触发和上传失败
- action必填写,可以为’'字符串 :action='#'
- :auto-upload=“false” 必须删除!!! 默认就是true.改为false虽然不自动提交,但是因为action为’',所以它不会提交.
- 自定义需要设置http-request方法 且 一旦设置自定义上传.则:on-success, :on-error 失效. 一切都在上传回调或者onchange等里面写
- 因为文件类型,需要用的file ,FormData格式.所以接口请求的时候需要设置 header为 ‘Content-Type’: ‘multipart/form-data’;如果上传接口需要Token还要在header里面加上token ; 因为本人是在统一axios接口请求封装上判断过config.date的类型 是否是文件类型.是的话 则将header设置为multipart/form-data;
- 如果需要自定上传,且需要自定义参数,则可以用：data和 :before-upload配合，其中 :before-upload可以自定义参数，before-upload要与auto-upload配合，auto-upload为true才生效。
<el-upload
action=""
:before-upload="beforeAvatarUpload"
:on-remove="removeUpload"
multiple
:on-success="successUpload"
:file-list="form.photoList"
:http-request="fileChange"
list-type="picture-card"
>
<i slot="default" class="el-icon-plus"></i>
</el-upload>从上到下的字段分别是
上传地址、上传前的回调、移除的回调、多选、成功的回调、文件列表、自定义上传、列表展示类型
自定义上传
// 自定义上传
fileChange(data) {
let file = data.file
let formData = new FormData()
formData.append('file', file)
console.log('二进制文件', formData.get('file'))
getuploadUserFile(formData).then(res => {
// data.onSuccess(res)
console.log(res)
this.form.photoList.push({
uid: res.logId,
url: res.data
})
console.log(this.form.photoList)
})
},自定义上传的函数中 在发送请求需要将file二进制文件采用formData格式配合请求头进行上传
formData的数据存入需要才有append加字段名才可以存入
注意的是，formData中存入的属性直接logformData是打印不出来的 需要采用get方法才能获取
图片上传的闪动问题
我的理解是uid的问题以及css问题
建议直接看这个文章 el-upload组件上传闪动的解决_el-upload上传一张limit为1的话会闪一下-CSDN博客
最方便的则是css强制关闭
Vue2+ElementUI实现照片墙时，上传抖动问题_element 图片回显会抖动一下-CSDN博客
图片的回显
需要绑定form-list这个字段
这个字段在显示过程中，读取的是url和uid两个参数进行回显
所以需要属性名操作，因为是图片集合所以才要遍历
List.photoList.forEach(item => {
this.form.photoList.push({
url: item
})
})图片的删除
图片删除则是需要调用上传组件自身的删除，删除的回调中两个字段 一个file 一个fileList
使用fileList进行赋值修改
// 删除上传文件显示操作
removeUpload(file, fileList) {
console.log(file)
console.log(fileList)
this.form.photoList = fileList
},
这个做法比较粗糙。但是有效。。、
