iview Upload組件多文件上傳，以及vue文件下載

iview Upload組件多文件上傳

系統常常遇到文件上傳的問題，iview提供了Upload組建，可以很好的實現文件上傳，固然一次上傳多個文件也是容許的。

思路：建立一個數組 把須要上傳的文件 push到這個數組裏面

1.引用組件

2.手動上傳，根據官方文檔 設置:before-upload ="handleUpload"等於false

(1).:before-upload 是 iview Upload 上傳組件的一個屬性 設置返回值爲 false 能夠阻止默認上傳方式（自動上傳模式）

(2).handleUpload 是上傳處理方法，能夠用於準備須要上傳的文件。

技術範圍：vue ，springboot

3.上傳方法　　　

1          //建立 formData 對象
2           let formData = new FormData();
3           //向 formData 對象中添加文件--這是其餘參數
4           formData.append('jsid', _jsid);
5           //多個文件上傳----------重點----須要把已經存儲到本地的文件加入 formData因此這裏用for循環
6           for(var i=0; i< that.file.length; i++){
7            formData.append("uploadFile",that.file[i]);  // 文件對象  
8           }

須要的變量

1 add: {
2     dialog: false,
3     uploadFile: []
4 },
5 loadingStatus: false

HTML代碼以下:

 1 <Modal v-model="add.dialog" title="文件上傳" :loading="true" :closable="false" width="540">
 2 <Tabs>
 3     <TabPane label="選擇文件">
 4     <Upload :before-upload="handleUpload" action multiple :format="['docx','doc','txt', 'pdf']">
 5         <Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
 6     </Upload>
 7     <div>
 8         <ul class="file-list" v-for="(list,index) in add.uploadFile" :key="index">
 9          <li>
10             <span style="font-size:15px;color:#FFFFFF">文件名: {{ list.name }}</span>
11             <Icon type="ios-close" size="25" color="red" @click="delFileList(index)"></Icon>
12          </li>
13         </ul>
14     </div>
15     </TabPane>
16 </Tabs>
17 <div slot="footer">
18 <Button type="text" size="large" @click="cancleUpload">取消</Button>
19 <Button
20 type="primary"
21 @click="upload"
22 :loading="loadingStatus"
23 >{{ loadingStatus ? '上傳中...' : '上傳' }}</Button>
24 </div>
25 </Modal>

須要的數據處理方法

 1 delFileList(index) {
 2   this.add.uploadFile.splice(index, 1);
 3 },
 4 handleUpload(file) {
 5  this.add.uploadFile.push(file);
 6  return false;
 7 },
 8 upload() {
 9     this.loadingStatus = true;
10     console.log("上傳："+this.add.uploadFile);
11     var formData = new FormData();
12     if (this.add.uploadFile.length > 0) {
13         //多個文件上傳
14         for (var i = 0; i < this.add.uploadFile.length; i++) {
15             formData.append("uploadFile", this.add.uploadFile[i]); // 文件對象
16         }
17         this.$http                                     
18         .postFile(this.ports.package.upload, formData)  //使用本身封裝的axios方法
19         .then(rdata => {
20             console.log(rdata);
21             if (rdata.data.succ) {
22                 this.loadingStatus = false;
23                 this.add.uploadFile = [];
24                 this.$Message.success("Success");
25                 this.add.dialog = false;
26             }
27         })
28         .catch(error => {
29         this.loadingStatus = false;
30         this.$Message.error("服務器錯誤" + error);
31      });
32     } else {
33     this.loadingStatus = false;
34     this.$Message.error("請至少上傳一個文件");
35     }
36 },

後期接收文件，我後臺用的是springboot

 1 @RequestMapping(value = "/upload", method = RequestMethod.POST)
 2 public PackageResponse uploadPackage(HttpServletRequest request,
 3 HttpServletResponse response,
 4 @RequestParam("uploadFile") MultipartFile[] uploadFile) {    
 5     try {
 6         for (MultipartFile multipartFile : uploadFile) {
 7 
 8         }
 9     
10     } catch (Exception e) {
11         response.setStatus(400);
12         return SimpleResponse.FAIL;
13     }
14     return SimpleResponse.SUCC;
15 }

 

這樣整個文件上傳基本就完成了！

vue文件下載

能上傳就要能下載，文件的下載就很簡單了，我使用的使用response返回文件流的方式 

 1 methods: {
 2     toDownload() {
 3         axios({
 4                 method: 'post',
 5                 url: url,
 6                 timeout: MAX_TIME_OUT_MS,
 7                 responseType: 'blob'
 8             }).then(res => {
 9                 console.log(res);
10                 this.download(res.data);
11             })
12             .catch(err => {
13                 console.log(err);
14                 if (err.response.status == 400) {
15                     this.$Message.error("下載出錯，文件可能不存在！！");
16                 }
17             });
18     },
19     // 下載文件
20     download(data) {
21         if (!data) {
22             return;
23         }
24         let url = window.URL.createObjectURL(new Blob([data]));
25         let link = document.createElement("a");
26         link.style.display = "none";
27         link.href = url;
28         link.setAttribute("download", "aaa.zip");
29 
30 
31         document.body.appendChild(link);
32         link.click();
33         this.$Message.info("下載完成！");
34         this.cancle();
35     },
36     cancle() {
37         this.$router.push({
38             path: "/edit"
39         });
40     }
41 }

 

springboot servie處理

 1 public AppResponse download(HttpServletRequest request, HttpServletResponse response, String id) throws FileNotFoundException,IOException {
 2     String filePathName = base + downloadPath + id ;
 3     //3 下載
 4     String zipFileName = filePathName + ".zip";
 5     String filename = filePathName + ".zip";
 6     //設置文件類型
 7     response.setContentType("application/octet-stream");
 8 
 9 
10     response.setCharacterEncoding("UTF-8");
11     //設置Content-Disposition
12     response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "utf-8"));
13     InputStream in = new FileInputStream(zipFileName);
14     OutputStream out = response.getOutputStream();
15     //寫文件
16     int b;
17     while ((b = in.read()) != -1) {
18         out.write(b);
19     }
20     out.flush();
21     in.close();//先關閉輸入流才能刪除
22     out.close();
23     return SimpleResponse.SUCC;
24 }