循环el-upload上传文件失败,清除失败文件

发布时间 2023-03-22 21:10:42作者: Ao_min
<div
              v-for="(item, index) in queryChangeItemByModeIddata"
              :key="index"
            >
<el-form-item
                :label="item.itemName"
                v-if="item.inputTypeId == 5"
                :required="item.isRequired == 1 ? true : false"
                style="width: 700px"
              >
                <el-upload
                  ref="uploadFile"
                  class="upload-demo"
                  action="action"
                  :auto-upload="true"
                  :http-request="uploadOk"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-change="onChange"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :disabled="loading"
                >
                  <el-button
                    size="small"
                    type="primary"
                    :disabled="loading"
                    @click="click(index, item)"
                  >
                    <!-- 点击上传 -->
                    {{ $t('info.upload') }}</el-button
                  >

                  <div slot="tip" class="el-upload__tip el-upload__tips"
                    ><!-- 只支持上传一个文件,且文件须小于30M -->
                    {{ $t('info.uploadTip') }}</div
                  >
                </el-upload>
              </el-form-item>
</div>

  

uploadOk(file) {
        let params = new FormData();
        params.append('file', file.file);
        this.loading = true;
        upload(params)
          .then((list) => {
            let listData = {
              itemId: this.uploadId,
              itemDetail: list.data,
              itemRemark: file.file.name
            };
            this.listDatas.push(listData); //组装数据
            this.loading = false;
          })
          .catch((e) => {
            this.$message.error(e.message);
            this.loading = false;
            // 判断上传失败清除列表(文件名超过40字符)
            let uid = file.file.uid;
            const mainFile = this.$refs.uploadFile;
            if (mainFile && mainFile.length) {
              for (var i = 0; i < mainFile.length; i++) {
                if (uid == mainFile[i].uploadFiles[0].uid) {
                  mainFile[i].clearFiles();
                  break;
                }
              }
            }
          });
      },
      handleRemove() {},
      handlePreview() {},
      handleExceed() {
        // 当前限制选择 1 个文件
        this.$message.warning(this.$t('info.limitFile'));
      },
      beforeRemove(file) {
        return this.$confirm(this.$t('info.detach') + `${file.name}?`);
      },
      //点击下拉获取下拉选中ID
      onSelectedDrug(id) {
        this.getqueryChangeItemByModeId(id);
      },
      click(index, item) {
        this.uploadId = item.itemId;
      },
      onChange() {},

  

click(index, item) {
        this.uploadId = item.itemId;
      },