vue2项目 上传文件时部分信息上传失败,并下载失败信息(.xlsx文件模板)

HTML

代码:(我这是部分HTML代码:复制属性名称用   方便点)

<el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="uploadUrl"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        :http-request="customUploadRequest"
        drag
      >

方法代码:


//可以自定义上传的实现
     customUploadRequest(options) {
      const formData = new FormData();
      formData.append('file', options.file);
      axios.post(options.action, formData, { responseType: 'blob' })
        .then(response => {
          options.onSuccess(response.data);
        })
        .catch(error => {
          options.onError(error);
        });
    },
//自定义下载事件
    downloadFailedFile(response) {
    // 创建下载链接
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(response);
      link.href = url;
      // 设置文件名
      let fileName = '导入错误信息.xlsx'; // 默认文件名
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      // 清理链接
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    },
// 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      if(response.size===0){
        //成功
        this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          '导入成功' +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();//导入成功后刷新数据事件
      }else{
        //存在失败
       this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          '部分信息导入失败,失败数据已下载,请查看备注' +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
       this.downloadFailedFile(response);
      this.getList();//导入成功后刷新数据事件
      }
    },
// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
// 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
 /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值