vue2项目 上传文件时部分信息上传失败,并下载失败信息(.xlsx文件模板)
HTML
代码:(我这是部分HTML代码:复制属性名称用 方便点)
<el-uploadref="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;},