element 多文件上传完整过程以及多个文件上传中取消功能

多文件上传 Upload 上传

• 只需要加上 multiple，如果有文件数量限制，使用limit
• 第一种方法：

<el-upload
	ref="upload"
    drag
	:action="uploadUrlMul" 
	:on-success="uploadSuccessMul"
	with-credentials
	:file-list="form.fileListMul"
	:before-upload="handleBeforeUploadMul"
	 :data="{ type: 0 }"
	 :on-change="handleChangeMul"
	 :on-remove="handleRemoveMul"
	 multiple
	 :on-exceed="handExceed"
	 :limit="20">
	 <i class="el-icon-upload"></i>
	 <div class="el-upload__text">
	  将文件拖到此处，或<em>点击上传</em>,<br />支持扩展名：{{typeList}}  </div>
	 <div class="el-upload__tip" slot="tip">支持一次同时上传多份文件，上限20个，单个文件大小不超过5G </div>
	</el-upload>

• action：后端接口路径
• with-credentials：防止跨域
• file-list：文件存储列表
• data：传给后端的参数

uploadSuccessMul(response, file, fileList) {
//上传成功事件
      let flags = false;
      // 判断文件是否都上传完毕
      flags = fileList.every((item) => {
        return item.status === "success";
      });
      if (flags) {
        fileList.forEach((i) => {
          if (i.response) {
            this.form.fileListMul.push({
              name: i.name,
              url: i.response.data,
            });
          }
        });
      }
      if (response.code == 1) {
        this.$message.success("上传文件成功！");
      } else {
        this.$message.error(response.message);
      }
    },

 handExceed(files, fileList) {
      this.$message.error(
        `当前限制选择 20 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件，上传文件数量超过上限！`
      );
    },

handleBeforeUploadMul(file) {
      let arrList = [];
      // 上传之前
      // 在上传文件之前 进行名称判断 防止重名
      arrList = this.form.fileListMul;
      let flag = true;
      let typeFlag = true;
      if (arrList.length > 0) {
        arrList.filter((item) => {
          if (item.name == file.name) {
            this.$message.error(file.name + "文件已存在！");
            flag = false;
          }
        });
      }
      var index = file.name.lastIndexOf(".");
      let fileType = file.name.substring(index + 1, file.name.length);
      typeFlag = this.typeArr.includes(fileType);// this.typeArr 这里是从后端那里拿到的数据格式参数

      if (!typeFlag) {
        this.$message.error("文件格式上传文件格式错误，请检查文件格式！");
        flag = false;
      }

      return flag;
    },

handleChangeMul(file, fileList) {
      // 文件改变
      if (file.status === "ready") {
        this.timer = setInterval(() => {
          this.getSession(); // 这里主要是我们的业务需要在大文件上传的时候 调接口实时查看有没有过期
        }, 1000 * 60 * 15);
      }
      if (file.status === "success") {
        clearInterval(this.timer);
      }
      // 判断文件是否都上传完毕
      this.flagNext = fileList.every((item) => {
        return item.status === "success";
      });
    },

// 新增页面的情况
handleRemoveMul(file, fileList) {
      // 删除文件
      let url = "";
      if (file.response) {
        url = file.response.data;
      } else {
        url = file.url;
      }
      if (file.status === "success") {
        let index = this.form.fileListMul
          .map((item) => item.url)
          .indexOf(url);
        this.$api
          .deleteFile(url)
          .then((data) => {
            if (data.data.code === 1) {
              this.form.fileListMul.splice(index, 1);
              this.$message.success(data.data.message);
            } else {
              this.$message.error(data.data.message);
            }
          })
          .catch((e) => {
            console.error(e);
            this.$message.error("删除文件异常");
          });
      } else {
      // 正在上传中 进行取消功能
        fileList.push(file);
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].uid == file.uid) {
            this.$refs.upload.abort(file);//取消功能
            fileList.splice(i, 1);
          }
        }
        this.handleChangeMul(file, fileList);
        console.log("上传取消");
      }
    },
// -------------------------------------------------------
// 编辑页面的情况
// 考虑到如果用户在删除文件后没点保存之间退出会导致文件丢失
// 所以先页面进行移除，然后把剩余的文件传给后端，后端再做处理
handleRemoveMul(file, fileList) {
      this.form.fileListMul = [];
      // 删除文件
      if (fileList.length > 0) {
        if (file.status === "success") {
          fileList.push(file);
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].uid == file.uid) {
              fileList.splice(i, 1);
            }
          }
          this.form.fileListMul = fileList;
        } else if (file.status === "ready" || file.status === "uploading") {
          this.$refs.upload.abort(file);
          this.form.fileListMul = fileList;
          this.handleChangeMul(file,fileList)
          console.log("上传取消");
        }
      }
    },

• 第二种方法

 <el-upload
        class="upload-demo"
        ref="upload"
        action="/"
        :before-remove="beforeRemove"
        :on-remove="handle_remove"
        multiple
        :limit="5"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :http-request="handleHttpRequest"
      >
        <el-button size="small" type="primary">选择上传文件</el-button>
      </el-upload>

handleHttpRequest(file) {
      this.files = file.file;
      this.fileName = file.name;
      let fileFormData = new FormData();
      fileFormData.append("file", this.files, this.fileName); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名
      let requestConfig = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.$post(this.api.upload, fileFormData, requestConfig)
        .then((res) => {
          this.fileList.push(res.data); //将文件放入file中
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handle_remove(file, fileList) {
      var _tmp = fileList;
      for (var i,index = 0;  i < _tmp.length; i++) {
        if (_tmp[i].name = file.name) {
          _tmp.splice(index, 1);
          break;
        }
      }
      this.fileList = _tmp;
    },