vue中使用element-ui实现excel表格导入
vue:
1 <el-upload class="avatar-uploader" :action="url" :headers="token" 2 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 3 :show-file-list="false" :before-upload="beforeAvatarUpload" :on-progress="uploading" 4 :on-success="importSuccess" :on-error="importError"> 5 <el-button type="success">导入</el-button> 6 </el-upload>
js:
1 import Cookies from 'js-cookie' 2 export default { 3 data() { 4 return { 5 url: `${window.SITE_CONFIG['apiURL']}/fenglianmeng/bdpartservant/importExcel`, 6 token: { 7 token: Cookies.get("token") 8 }, 9 } 10 }, 11 methods: { 12 beforeAvatarUpload(file) { 13 }, 14 uploading() { 15 this.loading = true; 16 }, 17 importSuccess(res) { 18 this.loading = false 19 if (res.code == 500) { 20 return this.$message.error('导入错误,请以正确格式填写文件'); 21 } 22 if (res.code !== 0) { 23 return this.$message.error(res.msg); 24 } 25 this.$message({ 26 message: '导入成功', 27 type: "success", 28 duration: 500, 29 onClose: () => { 30 this.getDataList() 31 } 32 }); 33 }, 34 importError(err) { 35 this.loading = false; 36 this.$message.error('服务器错误,导入失败') 37 }, 38 } 39 }