elementui之封装下载模板和导入文件组件方式

这篇文章主要介绍了关于elementui之封装下载模板和导入文件组件方式，具有很好的参考价值，希望对大家有所帮助。

elementui封装下载模板和上传组件

封装代码如下

1. <template> 
2.   <div> 
3. <el-dialog 
4.   :title="exportStatus? '导入结果' : '一键导入数据'" 
5.   :visible.sync="dialogVisible" 
6.   width="905px" 
7.   :before-close="handleClose" 
8.   class="export-standard-speech" 
9. > 
10. <div class="standard-export" v-if="!exportStatus"> 
11.   <div class="export-title">1、下载导入模板</div> 
12.   <div class="export-warning">根据提示完善表格内容</div> 
13.   <div class="export-download-btn"> 
14. <img 
15.   src="@/assets/img/download-demo-icon.png" 
16.   width="12px" 
17.   style=" 
18. vertical-align: baseline; 
19. margin-right: 3px; 
20. margin-top:2px; 
21. display: inline-block; 
22.   " 
23. /> 
24. <a 
25.   class="a-line" 
26.   :href="downloadDemoUrl" rel="external nofollow"  
27.   download="项目导入模板.xlsx" 
28.   title="下载空的表格模板" 
29. >下载空的表格模板</a> 
30.   </div> 
31.   <div class="export-title">2、上传完善后的表格</div> 
32.   <el-upload 
33. class="upload-demo-xls" 
34. drag 
35. ref="speechDemoUpload" 
36. action="" 
37. :file-list="fileList" 
38. :auto-upload="false" 
39. :show-file-list="false" 
40. accept=".xls,.xlsx,.csv" 
41. :on-change="handleChange" 
42.   > 
43. <div class="el-upload__text" v-if="!uploadStatus">将文件拖到此处，或点击<em>上传</em></div> 
44. <div class="el-upload__text" v-else> 
45.   <span class="file-name">{{ this.file && this.file.name }}</span> 
46.   <span class="file-size">（{{bytesToSize(this.file.size)}}）</span> 
47.   <span class="file-select">重新选择</span> 
48. </div> 
49.   </el-upload> 
50.   <div class="h32 flex-center-center" style="margin-top:38px"> 
51. <Button text="取消" background="#fff" border="#4646E6" color="#4646E6" class="ml10"  @click.native="cancelExport" ></Button> 
52. <Button text="导入" background="#4646E6" color="#fff" class="ml10"  @click.native="xlsDemoExport" :setGray="isFile"></Button> 
53.   </div> 
54. </div> 
55. <div v-if="exportStatus && failNum > 0"> 
56.   <div class="fail-num"> 
57. <img src="@/assets/img/export-fail-img.png" alt="" class="mr10"> 
58. 导入失败 
59. <span>{{failNum}}条</span> 
60. 数据 
61.   </div> 
62.   <div class="export-fail-table"> 
63. <div class="export-fail-text">以下为导入失败的项目，您可修改后重新导入</div> 
64. <el-table 
65.   :data="tableData" 
66.   height="220" 
67. > 
68.   <el-table-column 
69. prop="lineNum" 
70. label="Execel行数" 
71. width="220" 
72. align="left" 
73.   > 
74.   </el-table-column> 
75.   <el-table-column 
76. prop="projectCode" 
77. label="项目编号" 
78. width="220" 
79. align="center" 
80.   > 
81.   </el-table-column> 
82.   <el-table-column 
83. prop="failReason" 
84. label="失败原因" 
85. width="220" 
86. align="right" 
87.   > 
88.   </el-table-column> 
89. </el-table> 
90.   </div> 
91.   <div class="h32 flex-center-center" style="margin-top:23px"> 
92. <Button text="关闭" background="#fff" border="#4646E6" color="#4646E6"   @click.native="cancelExport" ></Button> 
93.   </div> 
94. </div> 
95. <div v-if="exportStatus && failNum == 0"> 
96.   <div class="success-img"> 
97. <img src="@/assets/img/export-success-img.png" alt="" class="mr10"> 
98.   </div> 
99.   <div class="success-text"> 
100. 成功导入 
101. <span>{{ successNum }}条</span> 
102. 数据 
103.   </div> 
104.   <div class="h32 flex-center-center" style="margin-top:23px"> 
105. <Button text="完成" background="#4646E6" color="#fff" class=""  @click.native="cancelExport"></Button> 
106.   </div> 
107. </div> 
108. </el-dialog> 
109.   </div> 
110. </template> 
111.  
112. <script> 
113. import Button from "@/components/Button"; 
114. import { upload, service } from '@/utils/request-brand' 
115. import { bytesToSize } from '@/utils' 
116.  
117. export default { 
118.   name: 'ImportData', 
119.   components: { 
120. Button 
121.   }, 
122.   props: { 
123. showDialogVisible: { 
124.   type: Boolean, 
125.   default: false, 
126.   required: true 
127. }, 
128. downloadDemoUrl:{ 
129.   type: String, 
130.   required: true 
131. }, 
132. uploadFileUrl:{ 
133.   type: String, 
134.   required: true 
135. }, 
136. // 考虑上传时其他参数的情况 
137. otherUploadData:{ 
138.   type: Object, 
139.   default:() => { 
140. return {} 
141.   } 
142. } 
143.   }, 
144.   computed: { 
145. userAccountID() { 
146.   return this.$store.state.user.userAccountID; 
147. }, 
148. isFile(){ 
149.   if(this.file){ 
150. return false 
151.   } else { 
152. return true 
153.   } 
154. } 
155.   }, 
156.   watch: { 
157. showDialogVisible(newVal) { 
158.   // console.log(newVal); 
159.   this.dialogVisible = newVal 
160. } 
161.   }, 
162.   data () { 
163. return { 
164.   dialogVisible: false, 
165.   fileList: [], 
166.   file: null, 
167.   // 上传文件的状态切换 
168.   uploadStatus: false, 
169.   successNum: 0, 
170.   failNum: 0, 
171.   tableData: [], 
172.   // 导入的状态 
173.   exportStatus: false, 
174. }; 
175.   }, 
176.   methods: { 
177. bytesToSize, 
178. handleClose(done) { 
179.   this.dialogVisible = false 
180.   this.$emit('dialogVisible', false) 
181. }, 
182. // 取消或者清空上传的文件和数据 
183. cancelExport(){ 
184.   // this.$refs.speechDemoUpload.clearFiles() 
185.   this.fileList = [] 
186.   this.file = null 
187.   this.successNum = 0 
188.   this.failNum = 0 
189.   this.tableData = [] 
190.   this.uploadStatus = false 
191.   this.exportStatus = false 
192.   this.$emit('dialogVisible', false) 
193. }, 
194. // 上传的文件改变时（覆盖原来的文件） 
195. handleChange(file, fileList){ 
196.   // console.log(file); 
197.   let extension = file.raw.name.substring(file.raw.name.lastIndexOf(".") + 1); 
198.   let size = file.size / 1024 / 1024; 
199.   // let size = file.size / 1024; 
200.   // console.log(extension, extension.toLowerCase() !== "xlsx"); 
201.   if (!['xlsx','xls','csv'].includes(extension.toLowerCase())) { 
202. this.$message.warning("文件格式不正确，请上传xls / xlsx / csv格式"); 
203. return false; 
204.   } 
205.   if (size > 10) { 
206. this.$message.warning("文件过大，请进行拆分后分多次上传"); 
207. return false 
208.   } 
209.   // console.log(file.raw, fileList); 
210.   if (fileList.length > 0) { 
211. this.fileList = [fileList[fileList.length - 1]]  // 这一步，是展示最后一次选择的csv文件 
212. this.file = this.fileList[0].raw 
213.   } 
214.   // console.log(this.file); 
215.   this.uploadStatus = true 
216. }, 
217. async xlsDemoExport(){ 
218.   if (!this.file) { 
219. // return this.$message.error('请上传文件') 
220. return false 
221.   } 
222.   const formData = new FormData() 
223.   formData.append('file', this.file) 
224.   // 添加其他参数 
225.   if(Object.values(this.otherUploadData).length > 0){ 
226. for (let key in this.otherUploadData) { 
227.   formData.append(key, this.otherUploadData[key]) 
228. } 
229.   } 
230.   //  调用上传接口... 
231.   this.$loading.show() 
232.   // `${process.env.VUE_APP_BASE_BRAND_API}/v1/inspectionSpeechArt/importExcel 
233.   upload.uploadFile(this.uploadFileUrl, formData).then(res => { 
234. if(res.code == 0){ 
235.   this.exportStatus = true 
236.   this.tableData = res.item.failList.map(item => { 
237. let obj = {} 
238. obj.lineNum = item.lineNum 
239. obj.failReason = item .failReason 
240. obj.projectCode = item. projectCode 
241. return obj 
242.   }) 
243.   this.failNum  = res.item.failNum 
244.   this.successNum = res.item.successNum 
245. } else { 
246.   this.$message.error(res.message) 
247. } 
248. this.$loading.hide() 
249.   }).catch((error) => { 
250. console.log(error); 
251. this.$message.error('上传失败，请稍后再试或联系IT解决') 
252. this.$loading.hide() 
253.   }) 
254. }, 
255.   }, 
256. } 
257. </script> 
258.  
259. <style  lang="scss" scoped> 
260. ::v-deep .el-dialog{ 
261.   width: 25%; 
262.   border-radius: 12px; 
263.   margin-top:-8vh !important; 
264.   top: 50%; 
265.   transform: translateY(-50%); 
266. } 
267. ::v-deep .el-dialog__header { 
268.   border-bottom: 1px solid #efeff6; 
269.   padding-left: 50px; 
270.   .el-dialog__title, 
271.   .el-dialog__headerbtn i { 
272. color: #36395c !important; 
273. font-size: 18px !important; 
274. font-weight: 600; 
275.   } 
276. } 
277. </style> 
278.  
279. <style lang="scss"> 
280. .export-standard-speech { 
281.   .el-list-enter-active, 
282.   .el-list-leave-active { 
283. transition: none; 
284.   } 
285.   .el-list-enter, 
286.   .el-list-leave-active { 
287. opacity: 0; 
288.   } 
289.   .el-upload-list { 
290. height: 40px; 
291.   } 
292.   // 表格body 
293.   .el-dialog__body{ 
294. padding: 30px 100px; 
295.   } 
296.   // 导入 
297.   .standard-export{ 
298. .upload-demo-xls{ 
299.   width: 100%; 
300.   margin-top: 20px; 
301. } 
302. .el-upload.el-upload--text{ 
303.   width: 100%; 
304. } 
305. .el-upload-dragger{ 
306.   width: 100%; 
307.   display: flex; 
308.   justify-content: center; 
309.   align-items: center; 
310.   border: 1px solid #EFEFF6; 
311.   height: 120px; 
312.   .el-upload__text{ 
313. font-weight: 600; 
314. color: #36395C; 
315. .file-name{ 
316.   color: #4646E6; 
317. } 
318. .file-size{ 
319.   color: #CCCDD8; 
320. } 
321. .file-select{ 
322.   color: #4646E6; 
323.   text-decoration: underline; 
324. } 
325.   } 
326. } 
327. .export-title{ 
328.   font-size: 14px; 
329.   color: #36395C; 
330.   font-weight: 600; 
331.   line-height: 20px; 
332. } 
333. .export-warning{ 
334.   font-size: 14px; 
335.   color: #CCCDD8; 
336.   line-height: 20px; 
337. } 
338. .export-download-btn{ 
339.   width: 165px; 
340.   height: 36px; 
341.   border: 1px solid #4646E6; 
342.   color: #4646E6; 
343.   opacity: 1; 
344.   border-radius: 6px; 
345.   display: flex; 
346.   align-items: center; 
347.   justify-content: center; 
348.   margin: 20px 0 30px; 
349. } 
350.   } 
351.  
352.   // 导入失败的表格数据 
353.   .fail-num{ 
354. display: flex; 
355. justify-content: center; 
356. align-items: center; 
357. margin-bottom: 24px; 
358. font-size: 16px; 
359. color: #36395C; 
360. font-weight: 600; 
361. span{ 
362.   color: #EF6E49; 
363.   margin: 0 3px; 
364. } 
365.   } 
366.   .export-fail-table{ 
367. width: 100%; 
368. height: 280px; 
369. border: 1px solid #EFEFF6; 
370. border-radius: 6px; 
371. padding: 0 20px; 
372. .export-fail-text{ 
373.   font-size: 14px; 
374.   line-height: 20px; 
375.   color: #36395C; 
376.   font-weight: 600; 
377.   margin-bottom: 20px; 
378.   margin-top: 20px; 
379. } 
380. .el-table__row { 
381.   height: 60px; 
382.   td { 
383. padding: 0 30px; 
384.   } 
385. } 
386. .has-gutter tr { 
387.   height: 60px; 
388. } 
389. .has-gutter tr th { 
390.   font-size: 14px; 
391.   color: #333333; 
392.   font-family: Arial; 
393.   padding: 0 20px; 
394. } 
395. thead th { 
396.   font-size: 14px; 
397.   color: #333333; 
398.   font-weight: 600; 
399.   height: 40px; 
400.   background: #F5F6FB; 
401. } 
402. // 滚动条的宽度 
403. .el-table__body-wrapper::-webkit-scrollbar { 
404.   width: 6px; // 横向滚动条 
405.   height: 6px; // 纵向滚动条 
406. } 
407. // 滚动条的滑块 
408. .el-table__body-wrapper::-webkit-scrollbar-thumb { 
409.   background-color: #E2E2E2; 
410.   border-radius: 3px; 
411. } 
412.   } 
413.   .success-img{ 
414. display: flex; 
415. justify-content: center; 
416. align-items: center; 
417. margin-top: 103px; 
418.   } 
419.   .success-text{ 
420. display: flex; 
421. justify-content: center; 
422. align-items: center; 
423. margin-top: 30px; 
424. margin-bottom: 50px; 
425. font-size: 16px; 
426. color: #36395C; 
427. font-weight: 600; 
428. span{ 
429.   color: #4646E6; 
430.   margin: 0 3px; 
431. } 
432.   } 
433. } 
434. </style> 

页面使用

只上传文件的形式

1. <template> 
2.   <div class="upload"> 
3.     <Button  text="批量导入"  background="#36395C" color="#fff" :icon="true"  @click.native="handleExportBtn" /> 
4.  
5. // ... 
6. <ImportData 
7.   :showDialogVisible="exportVisible" 
8.   :downloadDemoUrl="downloadStandardSpeech" 
9.   :uploadFileUrl="uploadFileUrl" 
10.   @dialogVisible="closeVisible" 
11. /> 
12.   </div> 
13. </template> 
14.  
15. <script> 
16. import ImportData from '@/views/components/ImportData.vue' 
17.  
18. export default { 
19.   name: "index", 
20.   components: { 
21. ImportData, 
22.   }, 
23.   data() { 
24. return { 
25.   // 导入弹框显示和隐藏 
26.   exportVisible: false, 
27.   downloadStandardSpeech: `${process.env.VUE_APP_EXPORTDEOM_API}/fileResources/templates_standardSpeech.xlsx`, // 模板下载文件地址, 
28.   uploadFileUrl: 'http://10.0.0.10:3000/v1/inspectionSpeechArt/importExcel' // 可以写在配置文件中 
29. }; 
30.   }, 
31.   computed: { 
32. userAccountID() { 
33.   return this.$store.state.user.userAccountID; 
34. }, 
35.   }, 
36.   // created() { 
37.   //   this.getDataList(); 
38.   //   this.getCheckType(); 
39.   // }, 
40.   activated() { 
41. this.getDataList(); 
42. this.getCheckType(); 
43.   }, 
44.   watch:{}, 
45.   methods: { 
46. // 导入 
47. handleExportBtn(){ 
48.   this.exportVisible = true 
49. }, 
50. // 关闭导入 
51. closeVisible(){ 
52.   this.exportVisible = false 
53.   // 刷新列表等操作 
54. }, 
55.   }, 
56. }; 
57. </script> 
58.  
59.  
60. <style lang="scss" scoped> 
61. </style> 

上传文件和其他必传参数的形式

1. <template> 
2.   <div class="upload"> 
3.     <Button  text="批量导入"  background="#36395C" color="#fff" :icon="true"  @click.native="handleExportBtn" /> 
4.  
5. // ... 
6. <ImportData 
7.   :showDialogVisible="exportVisible" 
8.   :downloadDemoUrl="downloadStandardSpeech" 
9.   :uploadFileUrl="uploadFileUrl" 
10.   :otherUploadData="otherUploadData" 
11.   @dialogVisible="closeVisible" 
12. /> 
13.   </div> 
14. </template> 
15.  
16. <script> 
17. import ImportData from '@/views/components/ImportData.vue' 
18.  
19. export default { 
20.   name: "index", 
21.   components: { 
22. ImportData, 
23.   }, 
24.   data() { 
25. return { 
26.   // 导入弹框显示和隐藏 
27.   exportVisible: false, 
28.   downloadStandardSpeech: `${process.env.VUE_APP_EXPORTDEOM_API}/fileResources/templates_standardSpeech.xlsx`, // 模板下载文件地址, 
29.   uploadFileUrl: 'http://10.0.0.10:3000/v1/inspectionSpeechArt/importExcel', 
30.   otherUploadData: {}, 
31. }; 
32.   }, 
33.   computed: { 
34. userAccountID() { 
35.   return this.$store.state.user.userAccountID; 
36. }, 
37.   }, 
38.   // created() { 
39.   //   this.getDataList(); 
40.   //   this.getCheckType(); 
41.   //   this.otherUploadData = { key : 'value' }; 
42.   // }, 
43.   activated() { 
44. this.getDataList(); 
45. this.getCheckType(); 
46. this.otherUploadData = { key : 'value' }; 
47.   }, 
48.   watch:{}, 
49.   methods: { 
50. // 导入 
51. handleExportBtn(){ 
52.   this.exportVisible = true 
53. }, 
54. // 关闭导入 
55. closeVisible(){ 
56.   this.exportVisible = false 
57.   // 刷新列表等操作 
58. }, 
59.   }, 
60. }; 
61. </script> 
62.  
63.  
64. <style lang="scss" scoped> 
65. </style> 

效果如下