Iview upload 上传文件

场景

打开模态框 上传文件, 文件限制 一次一个文件,关闭模态框modal 清除历史文件列表

如图:

template

    <Modal v-model="import_modal" title="导入">
      <!-- 去除按钮 自定义页脚 -->
      <div slot="footer"></div>
      <Upload
        ref="upload"
        :action="actionUrl"
        name="excel-file"
        :show-upload-list="true"
        :on-format-error="handleFormatError"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :on-error="handleError"
        :before-upload="handleUpload"
        :format="['csv']"
        :data="uploadData"
      >
        <Button type="primary">选择文件</Button> <br />
      </Upload>
      <Button type="primary" style="margin-right:15px;" v-if="total > 0"
        >总条数 : {{ total }}</Button
      >

      <Button type="success" style="margin-right:15px" v-if="success_number > 0"
        >成功 : {{ success_number }}</Button
      >

      <Button type="error" v-if="error_number > 0" @click="downLoadError"
        >下载错误 : {{ error_number }}</Button
      >
    </Modal>

modal

 // 导入
    handleUpload(file) {
      this.uploadData.file = file;
      const check = this.uploadList.length < 1;
      if (!check) {
        this.$Notice.warning({
          title: "一次一个文件哦",
        });
      }
      return check;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "文件 " + file.name + " 格式不正确，请上传.csv文件。",
      });
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      this.total = 0;
      this.error_number = 0;
      this.success_number = 0;
    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        this.total = res.data.total_count;
        this.error_number = res.data.error_number;
        this.success_number = res.data.success_number;
        this.errorUrl = res.data.url;
        this.file_name = res.data.file_name;
        this.$Message.success("选择文件成功！");
      }
    },
    handleError(error, file) {
      this.$Message.error("数据导入失败！");
    },

mounted

  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  },

watch

import_modal(value, oldValue) {
      this.maSearch();
      if (value) {
        this.$refs.upload.clearFiles(); // 清除回显文件列表
        this.uploadList.shift();
        this.uploadList = this.$refs.upload.fileList;
        this.total = 0;
        this.error_number = 0;
        this.success_number = 0;
      }
    },