vue中使用element-ui实现excel表格导入

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 }