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;
},