vue2中关于elementUI的自定义上传

一、项目背景

在项目中采用了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才生效。

html 复制代码

        <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>

从上到下的字段分别是

上传地址、上传前的回调、移除的回调、多选、成功的回调、文件列表、自定义上传、列表展示类型

自定义上传

javascript 复制代码

 // 自定义上传
    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两个参数进行回显

所以需要属性名操作，因为是图片集合所以才要遍历

javascript 复制代码

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

这个做法比较粗糙。但是有效。。、