element upload手动上传并灵活删除文件列表项

实现效果

点击提交才能上传文件列表，文件列表右侧关闭按钮删除单个文件项目
实现代码如下
template

<el-dialog
        title="导入"
        :visible.sync="dialogVisibleUpload"
        width="30%"
        :close-on-click-modal="false"
      >
        <h3>批量导入</h3>
        <el-form ref="form" class="upload-form" :rules="rules">
          <el-form-item label="模板上传" prop="name">
            <el-upload
              ref="upload"
              :action="url"
              :auto-upload="false"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="fileList"
              drag
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <h4>使用说明</h4>
        <div class="use-text">
          <p>1.每次上传数据条数限制为10000条，超出部分不导入</p>
          <p>2.导入不成功的记录会在结果中反馈</p>
          <p>3.标题行不会被导入</p>
          <p>4.上传成功后，数据将被展示，请确保数据准确</p>
          <p>5.上传数据量大小会影响上传时间(大约需要3-5分钟),请耐心等待</p>
        </div>
        <!-- <span>数据已导入，可能会经过长时间校验，校验完成后会通过系统消息进行通知</span> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleUpload = false">取 消</el-button>
          <el-button class="primary-but" @click="submitUpload">提 交</el-button>
        </span>
      </el-dialog>

data

      fileList: [],
      url: "",
      dialogVisibleUpload: false,

js

handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 点击按钮触发
    async submitUpload() {
      if (this.fileList.length < 1) {
        this.$message.error("请选择文件传输！");
        return;
      }
      const formData = new FormData();
      this.fileList.forEach((item) => {
        formData.append("file", item.raw);
      });
      const { data: res } = await axios.post(this.url, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      if (res.code != "200") {
        return;
      } else {
          this.$message.success("导入成功！");
          this.dialogVisibleUpload = false;
          this.getList();
          this.$refs.upload.clearFiles();
      }
    },

重点
手动上传，要关闭自动上传的功能

:auto-upload="false"

使用remove和change控制文件列表的增加和删除

:on-remove="handleRemove"
              :on-change="handleChange"