el-upload的多文件上传

el-upload实现多文件上传的方法

<el-upload
          class="upload-demo"
          drag
          action="#"
          multiple
          ref="upload"
          :file-list="files"
          :http-request="handleUpload"
          :on-exceed='handExceed'
          :on-remove="handleRemove"
          :on-success='handFileSuccess'
          :before-remove="beforeRemove"
          :auto-upload="false"
          :limit="5">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">一次只能上传5个文件</div>
        </el-upload>
<span slot="footer" class="dialog-footer">
          <el-button @click="CancelUpload">取 消</el-button>
          <el-button type="primary" @click="fileChange">立即上传</el-button>
        </span>

data () {
    return {
      files:[]
    };
  },

handleUpload(raw){
      this.files.push(raw.file);
      // console.log(files);
    },
    async fileChange() {
      if (this.files.length > 5) {
        this.$message.warning(`当前限制只能上传选择 1~5 个文件`);
        return
      } else {}
      const loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$refs.upload.submit() // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
      let random = Math.random();
      let formData = new FormData();
      // formData.append("file", param.file);
      formData.append("user_id", localStorage.user_id);
      formData.append("s_id", localStorage.s_id);
      formData.append("random", random);
      formData.append("file_kind", "src");
      this.files.forEach(function (file) {
         formData.append('file', file); // 因为要上传多个文件，所以需要遍历一下才行
         //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
       })
      let res = await this.$axios.post(`${this.$baseUrl}/file/upload`, formData);
      console.log(res);
      // JSON.parse(res)
      if (res.data.ret) {
        this.$refs.upload.clearFiles();
        this.files = []
        let objList = []
        loading.close();
        
      } else {
        loading.close();
        this.$message.error("上传文件失败" + res.data.msg);
      }
    },
    handExceed(files, fileList){
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    CancelUpload(){
      this.files = []
      this.$refs.upload.clearFiles();
    },
    handFileSuccess(file) {
      console.log(file);
      this.files = []
      this.$refs.upload.clearFiles();
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      this.files = fileList
    },
    beforeRemove(file, fileList) {
      // console.log(file, fileList);
    },