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

html:

 <el-form-item label="" style="width: 960px;">
          <span slot="label"><span style="color:red;">*</span>音频内容</span>
          <el-upload :action="uploadAudioUrl"
                     :headers="uploadHeaders"
                     :show-file-list="false"
                     accept=".mp3"
                     :on-progress="handleUploadContentAudioProcess"
                     :on-success="handleUploadContentAudioSuccess"
                     multiple
                     ref="audioListUpload1"
                     style="width: 100px;display: inline-block;">

            <el-button size="small" type="primary" @click="isClick='add'">添加音频</el-button>
            <div class="el-form-item__error" style="position: relative" v-if="showErr">请上传音频内容</div>
          </el-upload>

          <el-button type="primary" size="small" @click="sortByList()" style="display: inline-block;position: absolute">
            排 序
          </el-button>
          <div style="margin-top: 10px;">
            <el-table :data="contentList" border stripe size="mini">
              <el-table-column label="序号" type="index" align="center" width="100">
                <template slot-scope="scope">
                  <el-select :value="scope.$index+1" size="mini"
                             @change="((newSequence)=>{changeContentImageSequence(scope.$index+1, newSequence)})">
                    <el-option v-for="index in contentList.length"
                               :key="index"
                               :label="index"
                               :value="index">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column show-overflow-tooltip label="音频名称" prop="name">
                <template slot-scope="scope">
                  <div>
                    <el-popover placement="right"
                                trigger="hover"
                                v-if="scope.row.path != null && scope.row.path !== ''">
                      <audio class="video" height="400"
                             :src="contentBaseUrl + scope.row.path"
                             controls="controls">您的浏览器不支持 audio 标签。
                      </audio>
                      <el-button type="text" slot="reference">{{ scope.row.name}}</el-button>
                    </el-popover>

                    <div v-else>{{ scope.row.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column show-overflow-tooltip label="标题" width="400" prop="episodeTitle">
                <template slot-scope="scope">
                  <div v-if="scope.row.status === 'success'">
                    <el-input v-model="scope.row.episodeTitle" placeholder="请输入音频标题内容"></el-input>
                  </div>
                  <el-progress :percentage="getPercentage(scope.row.percentage)"
                               v-if="scope.row.status === 'uploading'">
                  </el-progress>
                </template>
              </el-table-column>

              <el-table-column show-overflow-tooltip label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="deleteAudio(scope.$index)">删除</el-button>
                  <el-upload style="display: inline-block"
                             :action="uploadAudioUrl"
                             :headers="uploadHeaders"
                             :show-file-list="false"
                             accept=".mp3"
                             :on-progress="handleChangeContentAudioProcess(scope.$index)"
                             :on-success="handleChangeContentAudioSuccess(scope.$index)"
                             multiple
                             ref="audioListUpload">
                    <el-button size="mini" type="primary"  @click="isClick='update'">更换</el-button>
                  </el-upload>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

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;
        });
      },