一、文檔：

Upload 上傳–Ant Design Vue

二、使用(以Jeecg為例)：

【1】template：

<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader":data="{ 'orderId': record.id }" :action="importExcelUrlDispatchCar"@change="handleImportExcel">導(dǎo)入
</a-upload>

【2】script：

<script>export default {data() {return {url:{importExcelUrlDispatchCar:"/kd/xxx/importTemplate"}}},computed: {//拼接上傳的地址importExcelUrlDispatchCar: function () {return `${window._CONFIG['domianURL']}/${this.url.importExcelUrlDispatchCar}`;},// 設(shè)置上傳的Header參數(shù)tokenHeader() {let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }let tenantid = Vue.ls.get(TENANT_ID)if (tenantid) {head['tenant-id'] = tenantid}return head;},},methods:{handleImportExcel(info){this.loading = true;if (info.file.status !==  'uploading') {console.log(info.file,  info.fileList);}if (info.file.status === 'done') {this.loading = false;if (info.file.response.success){if (info.file.response.code === 201) {let { message, result:{ msg, fileUrl, fileName } }= info.file.responselet href = window._CONFIG['domianURL'] + fileUrlthis.$warning({title: message,content: (<div><span>{msg}</span><span>具體詳情請 <a href={href}target="_blank" download={fileName}>點(diǎn)擊下載</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') {this.loading = false;if (info.file.response.status === 500) {let data = info.file.responseconst token = Vue.ls.get(ACCESS_TOKEN)if (token && data.message.includes("Token失效")) {this.$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} `);}},}}
</script>

三、效果圖：