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 }