vue+element中的upload实现自定义多文件上传

业务需求就是需要上传多个文件，然后点击创建任务时，创建完任务，文件才根据创建完的任务的ID，进行对应的上传。

一、使用upload组件时，把action设置为空，定义:http-request也就是自定义上传，然后把:auto-upload设置为false，就是取消默认上传行为，:on-change就是上传文件时触发，:before-remove就是删除文件之前触发，:on-remove就是删除文件时触发。

<el-tooltip class="item" effect="dark" content="最多选择三个文件" placement="top-start">
    <el-upload
      drag
      action=""
      multiple
      :http-request="myUploadFile"
      ref="upload"
      :limit=3
      accept=".list,.xlsx,.xls,.dat"
      :file-list="fileList"
      :auto-upload="false"
      :on-change="onChangeFile"
      :before-remove="beforeRemove"
      :on-remove="onRemoveFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </el-tooltip>

二、定义初始值，写上传文件、移除文件之前和移除文件的方法

data() {
      return {
        fileList: [], // // 上传文件列表
        upFileList: [], // 文件File列表 上传参数,
      }
    },

 onChangeFile(file, fileList) {
        this.upFileList = []
        const name = file.name.split('.')[1]
        for (let x of fileList) {
          if (x.raw) {
            this.upFileList.push(x.raw)
          }
        }
      },

      // 移除文件之前
      beforeRemove(file, fileList) {
        return this.$msgbox.alert(`确定移除 ${file.name}？`)
      },

      // 移除文件
      onRemoveFile(file, fileList) {
        this.upFileList = []
        for (let x of fileList) {
          if (x.raw) {
            this.upFileList.push(x.raw)
          }
        }
      },

三、主要来说说，上传文件的接口，我这边是当父组件提交表单的时候，才调用这个方法，大家测试上传文件的时候，文件内容一定不能为空，我就因为文件内容是空，导致一直报错。。。。

 myUploadFile() {
        let uploadForm = new FormData()
        uploadForm.append('id', 1)
        this.upFileList.map(item => {
          const fileType = item.name.split('.')[1]
          if (fileType === 'dat') {
            uploadForm.append('pkg', item)
          } else if (fileType === 'list') {
            uploadForm.append('md5', item)
          } else if (fileType === 'xls' || fileType === 'xlsx') {
            uploadForm.append('vul_excel', item)
          }
        })
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data',
          }
        }
        this.$axios.post('/update/upload_file/', uploadForm, config).then(res => {
          if (res.data.code === 0) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
          }else{
            this.$message.error(res.data.msg)
          }
        })
      }