Element+vue.js 實現(xiàn)文件模板下載，和Upload 上傳文件帶參數(shù)

新進小設(shè)計 2021-09-16

展開全文

一開始自己也是第一次用Element+vue.js 做上傳文件功能，走了點彎路。經(jīng)過功能實現(xiàn)后整合了一下，給需要的朋友們參考一下。

功能頁面如下：

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

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">參數(shù)</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 必選參數(shù)，上傳的地址 string

auto-upload 是否在選取文件后立即進行上傳 boolean

before-upload     上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳
on-success    文件上傳成功時的鉤子 function(response, file, fileList)
on-error      文件上傳失敗時的鉤子 function(err, file, fileList)
data      上傳時附帶的額外參數(shù) object
limit           最大允許上傳個數(shù) 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             //參數(shù)
16             parameter:'',
17             }
18         },
19      methods: {
20 
21   beforeUpload: function (file) {
22             var __self = this;
23             var result = true;
24             
25             //參數(shù)不能為空驗證
26             if (__self.searchData.parameter == "") {
27                 __self.$message({ message: '請輸入?yún)?shù)！', 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: '導入數(shù)據(jù)中...',
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   //被帶入到后臺的參數(shù)
81   computed: {
82         paramsData: function () {
83             var __self = this;
84             var params = {
85                 parameter: __self.searchData.parameter,
86             };
87             return params;
88         }
89     }