上传官网地址:https://www.antdv.com/components/upload-cn/
一、引入公共js:JeecgListMixin.js
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
二、js文件中的对应导入的方法:handleImportExcel
handleImportExcel(info){
console.log(info)
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
if (info.file.response.success) {
if (info.file.response.code === 201) {
let { message, result: { msg, fileUrl, fileName } } = info.file.response
let href = window._CONFIG['domianURL'] + fileUrl
this.$warning({
title: message,
content: (<div>
<span>{msg}</span><br/>
<span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
</div>
)
})
} else {
this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
}
this.loadData()
} else {
this.$message.error(`${info.file.name} ${info.file.response.message}.`);
}
} else if (info.file.status === 'error') {
if (info.file.response.status === 500) {
let data = info.file.response
const token = Vue.ls.get(ACCESS_TOKEN)
if (token && data.message.includes("Token失效")) {
Modal.error({
title: '登录已过期',
content: '很抱歉,登录已过期,请重新登录',
okText: '重新登录',
mask: false,
onOk: () => {
store.dispatch('Logout').then(() => {
Vue.ls.remove(ACCESS_TOKEN)
window.location.reload();
})
}
})
}
} else {
this.$message.error(`文件上传失败: ${info.file.msg} `);
}
}
},
三、按钮点击事件
<!--
showUploadList:是否展示 uploadList
multiple:是否支持多选
headers:设置上传的请求头部
importExcelUrl:上传地址
handleImportExcel:上传文件改变时的状态
-->
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>