element-ui upload组件如果上传不成功如何删除文件

首先给upload组件添加before-remove属性，对应添加beforeRemove方法

<el-upload

                  ref="refUpload"

                  style="width: 100%"

                  class="upload-demo"

                  :action="uploadAddress"

                  :on-preview="handlePreview"

                  :on-change="handleChange"

                  :on-success="handleSuccess"

                  :before-upload="beforeUpload"

                  :before-remove="beforeRemove"

                  multiple

                  :limit="10"

                  :data="{ fileType: '00' }"

                  :file-list="fileList"

                >

                 <el-button size="small" type="primary">点击上传</el-button>

                  <div slot="tip" class="el-upload__tip">

                    支持发起人上传pdf，word，excel，jpg/png

                    附件，单个附件20M以内，数量不超过10个

                  </div>

                </el-upload>

beforeRemove(file, fileList) {

// 通过splice删除当前

      if (!file.fileId) {

        this.fileList.splice(fileList.indexOf(file), 1);

        return false

      }

      this.$confirm("此操作将删除该文件, 是否继续?", "提示", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",

      }).then(() => {

        this.deleteFile(file)

      });

      return false;

    },

每次上传成功后都会将文件push到fileList里面，在beforeRemove方法里面通过splice将上传失败的文件删除，能完indexOf(file) 可以直接获取到文件对应索引

本文章由javascript技术分享原创和收集