Element+vue.js 实现文件模板下载，和Upload 上传文件带参数

新进小设计 2021-09-16

展开全文

一开始自己也是第一次用Element+vue.js 做上传文件功能，走了点弯路。经过功能实现后整合了一下，给需要的朋友们参考一下。

功能页面如下：

下面是此功能的完整代码：

HTML：（样式由于是文件引用，这里没有给，亲们自己有自己喜欢的CSS）

 1 <div id="uploadFile">
 2 
 3     <input type="hidden" id="hidSid" value="@ViewBag.sid" />
 4 
 5     <div>
 6 
 7         <span style="color:red">*</span><span class="w60">参数</span>
 8     </div>
 9 
10     <div style="margin-left:3px;">
11         <el-input v-cloak class="w160" v-model="searchData.parameter"></el-input>
12     </div>
13 
14     <div class="inline-block" style="line-height: 38px;">
15         <el-upload class="upload-demo"
16                    style="float:left;"
17                    v-bind:action="uploadPath"
18                    v-bind:auto-upload="true"
19                    v-bind:before-upload="beforeUpload"
20                    v-bind:on-success="uploadSuccess"
21                    v-bind:on-error="uploadFail"
22                    v-bind:data="paramsData"
23                    v-bind:limit="1"
24                    v-bind:show-file-list="false"
25                    v-bind:file-list="fileList">
26 
27             <el-button v-cloak style="width:160px;" type="warning">上传文件</el-button>
28         </el-upload>
29 
30         <el-button type="text" style="margin-left:20px;padding-top:18px;" v-on:click="downloadTemplate">文件模板下载</el-button>
31     </div>
32 
33 </div>

解释说明：

action 必选参数，上传的地址 string

auto-upload 是否在选取文件后立即进行上传 boolean

before-upload     上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
on-success    文件上传成功时的钩子 function(response, file, fileList)
on-error      文件上传失败时的钩子 function(err, file, fileList)
data      上传时附带的额外参数 object
limit           最大允许上传个数 number
show-file-list   是否显示已上传文件列表 boolean
file-list         上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx./xxx.jpg'}]

Script:这里用的是vue.js

 1 var vueIncomePay = new Vue({
 2     el: '#uploadFile',
 3     data: {
 4         sid: document.getElementById('hidSid').value,
 5         //上传Excel
 6         uploadPath: '/FM/Account/UploadBathCheck?sid=' + document.getElementById('hidSid').value,
 7         //上传文件格式
 8         fileTypeList: ['xls', 'xlsx'],
 9         //上传文件大小 2M
10         fileSize: 2,
11         fileList: [],
12         },
13          searchData: {
14             IsDetail: false,
15             //参数
16             parameter:'',
17             }
18         },
19      methods: {
20 
21   beforeUpload: function (file) {
22             var __self = this;
23             var result = true;
24             
25             //参数不能为空验证
26             if (__self.searchData.parameter == "") {
27                 __self.$message({ message: '请输入参数！', type: 'warning' });
28                 return false;
29             }
30             var type = file.name.substring(file.name.indexOf('.') + 1, file.name.length).toLowerCase();
31             var isExcel = __self.fileTypeList.indexOf(type) != -1;
32             var isLtSize = file.size / 1024 / 1024 < __self.fileSize;
33 
34             if (!isExcel) {
35                 __self.$message.error('上传文件只能是 ' + __self.fileTypeList.join(',') + ' 格式');
36             }
37             if (!isLtSize) {
38                 __self.$message.error('上传文件大小不能超过 ' + __self.fileSize + 'M');
39             }
40             result = isExcel && isLtSize;
41             __self.reMsg = '';
42             __self.errorList = [];
43             if (result) {
44                 __self.loading = __self.$loading({
45                     lock: true,
46                     text: '导入数据中...',
47                     spinner: 'el-icon-loading',
48                     background: 'rgba(0, 0, 0, 0.7)'
49                 });
50             }
51             return result;
52         },
53 
54         uploadSuccess: function (data, file, fileList) {
55             var __self = this;
56             __self.resultMsg = '';
57             __self.loading.close();
58             if (data == null) {
59                 __self.$message.error('导入失败');
60                 return;
61             } else {
62                 console.log(JSON.stringify(data));
63                 __self.fileList = [];
64                 if (data.isSucc) {
65                     __self.$message.success(data.message);
66                 } else {
67                     __self.$message.error(data.message);
68                 }
69                 console.log(__self.errorList);
70             }
71         },
72 
73         uploadFail: function (err) {
74             this.$message.error('导入失败');
75             console.log(JSON.stringify(err));
76             return;
77         },
78          },
79 
80   //被带入到后台的参数
81   computed: {
82         paramsData: function () {
83             var __self = this;
84             var params = {
85                 parameter: __self.searchData.parameter,
86             };
87             return params;
88         }
89     }