el-upload，上传文件，后端提示信息，前端需要再次重新上传(不用重新选择文件)

1.el-upload

上传附件：
<el-upload
        ref="upload"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :auto-upload="false"
        :disabled="upload.isUploading"
        :headers="upload.headers"
        :limit="1"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        accept=".xlsx, .xls"
        drag
        :file-list="upload.fileList"
        :data="upload.data"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

是否重新上传提示框
    <el-dialog
      title="关联码重复，是否继续上传？"
      :visible.sync="continueUploadModal.show"
      width="30%"
    >
      <span>{{ continueUploadModal.msg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="continueUploadModal.show = false">取 消</el-button>
        <el-button type="primary" @click="continueUpload">确 定</el-button>
      </span>
    </el-dialog>

2.data数据

upload: {
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "带征地导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的设备数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/load/landAcquisition/import",
        // 上传文件列表
        fileList: [],
        //额外参数
        data: {isCon: 0}
      },
// 复制file
      fileCopy: null,

3.js

// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.$set(this.upload, "fileList", [file]);
      this.upload.isUploading = true;
    },

// 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      const { code, msg } = response;
      if (code == 505) {
        // 在这里存一下文件
        this.fileCopy = file;
        // 清空上传文件的
        this.$refs.upload.clearFiles();
        this.continueUploadModal.show = true;
        this.continueUploadModal.msg = msg;
      } else {
        this.$alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
            response.msg +
            "</div>",
          "导入结果",
          { dangerouslyUseHTMLString: true }
        );
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.upload.data.isCon = 0
        this.continueUploadModal.show = false
        this.getList();
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
// 导入文件，关联码重复，继续上传
    continueUpload() {
      this.upload.data.isCon = 1;
      this.$refs.upload.handleStart(this.fileCopy.raw);
      this.submitFileForm();
    },

原文地址：https://blog.csdn.net/m0_56104994/article/details/143488629

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！