vue+el-upload上传多文件，上传中删除，更换和删除

html:

 
          *音频内容
          

            添加音频
            
请上传音频内容
          

          
            排 序
          
          

            
              
                
              

              
                
              

              
                
              

              
                
              
            
          
        

js：

//音频上传
      handleUploadContentAudioProcess(event, file, fileList) {
        if (file.status === 'fail') {
          for (let i = 0; i < this.contentList.length; i++) {
            if (this.contentList[i].uid === file.uid) {
              this.contentList.splice(i, 1);
              break;
            }
          }
          return;
        }
        let exist = false;
        for (let i = 0; i < this.contentList.length; i++) {
          if (this.contentList[i].uid === file.uid) {
            this.contentList[i] = file;
            exist = true;
            break;
          }
        }

        if (!exist) {
          this.contentList.push(file);
        }
      },
      handleUploadContentAudioSuccess(response, file) {
        if (response.code === this.$constant.RESPONSE_CODE_LIST.SUCCESS) {
          this.isEpisodeTitleInput = true;

          file.path = response.data[0].path;
          file.audioName = response.data[0].audioName;
          file.totalSeconds = response.data[0].totalSeconds;
          let exist = false;

          for (let i = 0; i < this.contentList.length; i++) {
            if (this.contentList[i].uid === file.uid) {
              this.contentList[i] = file;
              this.$set(this.contentList[i], 'episodeTitle', file.audioName.split(".")[0]);
              exist = true;
              break;
            }
          }

          if (!exist) {
            this.contentList.push(file);
          }

        } else if (response.code === this.$constant.RESPONSE_CODE_LIST.TOKEN_INVALID) {
          this.$message({
            message: response.message,
            type: "error",
            duration: 5 * 1000
          });

          let callback = location.href;

          let baseUrl = process.env.UNION_BASE_URL;
          let reg = new RegExp("\/$");
          if (reg.test(process.env.UNION_BASE_URL)) {
            baseUrl = process.env.UNION_BASE_URL.substring(0, process.env.UNION_BASE_URL.length - 1);
          }

          location.href = baseUrl + "/login?systemId=" + response.data.systemId
              + "&callback=" + encodeURIComponent(callback);
        } else {
          this.$message({
            message: response.message,
            type: "error",
            duration: 5 * 1000
          });

        }
      },
      //更换已上传的
      handleChangeContentAudioProcess(index) {
        return (function (event, file, fileList) {
          if (file.status === 'fail') {
            this.contentList.splice(index, 1);

            return;
          }

          this.isEpisodeTitleInput = false;

          this.contentList.splice(index, 1, file);
        }).bind(this);
      },
      handleChangeContentAudioSuccess(index) {
        return (function (response, file, fileList) {
          if (response.code === this.$constant.RESPONSE_CODE_LIST.SUCCESS) {
            this.isEpisodeTitleInput = true;

            file.path = response.data[0].path;
            file.audioName = response.data[0].audioName;
            file.totalSeconds = response.data[0].totalSeconds;

            this.contentList.splice(index, 1, file);

            this.$set(this.contentList[index], 'episodeTitle', file.audioName.split(".")[0]);

          } else if (response.code === this.$constant.RESPONSE_CODE_LIST.TOKEN_INVALID) {
            this.$message({
              message: response.message,
              type: "error",
              duration: 5 * 1000
            });

            let callback = location.href;

            let baseUrl = process.env.UNION_BASE_URL;
            let reg = new RegExp("\/$"); // eslint-disable-line
            if (reg.test(process.env.UNION_BASE_URL)) {
              baseUrl = process.env.UNION_BASE_URL.substring(0, process.env.UNION_BASE_URL.length - 1);
            }

            location.href = baseUrl + "/login?systemId=" + response.data.systemId
                + "&callback=" + encodeURIComponent(callback);
          } else {
            this.$message({
              message: response.message,
              type: "error",
              duration: 5 * 1000
            });
          }
        }).bind(this);
      },
       //上传进度
      getPercentage(percentage) {
        return Number(percentage.toFixed(0));
      },
      //删除操作
      deleteAudio(index) {
        this.$confirm("确认删除音频文件吗？", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
        //判断当前文件状态是否 在上传中，
          if (this.contentList[index].status == 'uploading') {
          //是新增上传，或是更换上传处理判断，
            if (this.isClick == 'add') {
              this.$refs.audioListUpload1.abort(this.contentList[index]);
            } else if (this.isClick == 'update') {
              this.$refs.audioListUpload.abort(this.contentList[index]);
            }

          }
          this.contentList.splice(index, 1);
        }).catch(() => {
          return;
        });
      },
       //自然排序排序
      sortByList() {
        if (this.contentList.length <= 1) {
          return
        }
        let episodeTitleList = [];
        for (let j = 0; j < this.contentList.length; j++) {
          episodeTitleList[j] = this.contentList[j].episodeTitle;
        }
        this.$http.post("/api/common/upload/batch/order", {}, {
          strings: episodeTitleList,
          type: 0
        }).then(response => {
          let list = response.data;
          let newlist = [];
          for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < this.contentList.length; j++) {
              if (list[i] == this.contentList[j].episodeTitle) {
                newlist[i] = this.contentList[j];
              }
            }
          }
          this.contentList = newlist;
        });
      },