Element+vue.js 实现文件模板下载，和Upload 上传文件带参数
一开始自己也是第一次用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.cdn.com/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 }
至于后台代码，本人是MVC。每个人用的都不一样，方法代码我就不贴了
如果有什么不明白的可以找我
点击选择了上传的文件才验证非空，这是一个不好的体验，有哪位大佬有更好的办法，还请不吝赐教，在此谢过！
赞 (0)