elementui导入excel文件-vue+elementui批量上传excel webapi后台接收并保存数据

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文为您介绍vue+elementui批量上传excel webapi后台接收并保存到数据库elementui导入excel文件，主要包括vue+elementui批量上传excel webapi后台接收并保存到数据库使用示例、应用方法、基础知识点总结以及必要的注意事项，具有一定的参考价值elementui导入excel文件，有需要的同学可以参考。

渲染：

上传窗口：

 1 <el-dialog title="上传部件" :visible.sync="isEditWinShow" custom-class="customWidth" :close-on-click-modal="false">
 2                 <el-form label-width="100px">
 3                     
 4                         <el-col :span="24">
 5                             <el-upload ref="upload" action="#" :limit="200" multiple accept=".xls,.xlsx" :on-change="handleChange"
 6                              :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadFile"
 7                              :auto-upload="false">
 8                                 <el-button slot="trigger" type="primary" size="small" align="right">选取文件
 9                                 
10                                 <el-button type="success" style="margin-left: 100px;" size="small" @click="submitUpload">上传到服务器
11                                 <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过700KB

 1 // 导入exel
 2             async importExcel() {
 3                 this.isEditWinShow = true;
 4             },
 5             // 上传文件
 6             uploadFile(file) {
 7                 this.fileData.append('files', file.file);
 8             },
 9             submitUpload() {
10                 const loading = this.$loading({
11                     lock: true,
12                     text: '数据提取中，请稍后',
13                     spinner: 'el-icon-loading',
14                     background: 'rgba(0, 0, 0, 0.7)'
15                 });
16                 if (this.fileList.length === 0) {
17                     this.$message({
18                         message: '请先选择文件',
19                         type: 'warning'
20                     });
21                 } else {
22                     const isLt700K = this.fileList.every(file => file.size / 1024 / 1024 / 1024 < 700);
23                     if (!isLt700K) {
24                         this.$message.error('请检查，上传文件大小不能超过700KB!');
25                     } else {
26                         var formData = new FormData(); //  用FormData存放上传文件
27                         this.fileList.forEach(file => {
28                             formData.append('partsInfoFile', file.raw, file.raw.name);
29                         })
                           //向webapi发起请求，等待后台接收
30                         axios.post(axiosbaseUrl_ex + '/PartsInfo/upload/', formData, {
31                                 headers: {
32                                     'Content-Type': 'multipart/form-data'
33                                 }
34                             })
35                             .then((response) => {
36                                     if (response.status == "200") {
37                                         setTimeout(() => {
38                                             loading.close();
39                                             this.getPartsList();
40                                             this.$message({
41                                                 type: 'success',
42                                                 message: '导入成功!'
43                                             });
44                                             this.getPartsList();
45                                             this.fileList = [];
46                                             this.fileData = "";
47                                             this.isEditWinShow = false;
48                                             this.isLoading = false;
49                                         }, 1000);
50                                     } else {
51                                         this.$message({
52                                             type: 'error',
53                                             message: '导入失败，请检查模板是否正确'
54                                         });
55                                         this.isLoading = false;
56                                     }
57                                 },
58                                 error => {
59                                     loading.close();
60                                     this.$message.error('系统异常，请稍后再试');
61                                     return Promise.reject(error);
62                                 }
63                             )
64                     }
65                 }
66             },
67             //移除
68             handleRemove(file, fileList) {
69                 this.fileList = fileList;
70             },
71             // 选取文件超过数量提示
72             handleExceed(files, fileList) {
73                 this.$message.warning(`当前限制选择200个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
74             },
75             //监控上传文件列表
76             handleChange(file, fileList) {
77                 let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
78                 if (existFile) {
79                     this.$message.error('当前文件已经存在!');
80                     fileList.pop();
81                 }
82                 this.fileList = fileList;
83             }

fileData: '', // 文件上传数据（多文件合一）

fileList: [], // 上传多个文件字段