vue2中关于elementUI的自定义上传

一、项目背景

在项目中采用了admin模板，和elementUI组件。需求为手动选择文件可多选上传并显示图片 

效果图为

二、自定义上传中遇到的问题

http-request

覆盖默认的上传行为，可以自定义上传的实现

function

—

—

在文档中存在这样一个自定义上传，但是在使用过程中出现了一些问题，

自定义上传函数不触发和上传失败

1.  action必填写,可以为’'字符串   :action='#'
2.  :auto-upload=“false” 必须删除!!! 默认就是true.改为false虽然不自动提交,但是因为action为’',所以它不会提交.
3. 自定义需要设置http-request方法 且 一旦设置自定义上传.则:on-success, :on-error 失效. 一切都在上传回调或者onchange等里面写
4. 因为文件类型,需要用的file ,FormData格式.所以接口请求的时候需要设置 header为 ‘Content-Type’: ‘multipart/form-data’;如果上传接口需要Token还要在header里面加上token ; 因为本人是在统一axios接口请求封装上判断过config.date的类型 是否是文件类型.是的话 则将header设置为multipart/form-data;
5. 如果需要自定上传,且需要自定义参数,则可以用：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

    },

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