iview Upload component file upload
Systems often experience problems uploading files, iview offers Upload formation, can achieve a good file upload, upload multiple files at once of course, it is also allowed.
Idea: Create an array to push files to be uploaded to the array inside
1. The reference component
2. Manual Upload, according to the official document setup: before-upload = "handleUpload" equals false
(1) .: before-upload is a property iview Upload upload component provided returns false prevents the default upload mode (mode automatically upload)
(2) .handleUpload upload processing method can be used to prepare uploaded file.
Technical range: vue, springboot
3. upload method
1 // Create Object formData 2 the let formData = new new the FormData (); . 3 // add files to formData object - which is the other parameters . 4 formData.append ( 'jsId' , _jsid); . 5 // plurality of file upload - --------- ---- we need to focus on the local file already stored so here formData added for loop . 6 for ( var I = 0; I <that.file.length; I ++ ) { . 7 formData .append ( "the uploadFile", that.file [I]); // file object 8 }
Variables needed
1 add: { 2 dialog: false, 3 uploadFile: [] 4 }, 5 loadingStatus: false
HTML code is as follows:
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 is > {{loadingStatus 'Uploading ...':? 'Upload'}} </ the Button > 24 </ div > 25 </ the Modal >
The data processing method requires
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 // plurality of file upload 14 for ( var I = 0; I < the this .add.uploadFile.length; I ++ ) { 15 formData.append ( "the uploadFile", the this .add.uploadFile [I]); // file object 16 } . 17 the this . HTTP $ 18 is .postFile ( the this .ports.package.upload, formData) // use method axios own package . 19 .then (RDATA => { 20 is the console.log (RDATA); 21 is IF (RDATA. data.succ) { 22 is the 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 = to false ; 34 is the this $ Message.Error An ( "Please upload at least one file." ); 35 } 36 },
Late receive files with my background is 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 }
So basically the entire file upload is complete!
vue Download
Will be able to download can upload, download files is very simple, using the response I used to return the way file stream
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 the this $ Message.Error An ( "download error, the file may not exist !!." ); 16 } 17 }); 18 }, 19 // download file 20 is downloads (Data ) { 21 is IF (! Data) { 22 is return ; 23 is } 24 the let URL = window.URL.createObjectURL ( new new Blob ([Data])); 25 the let Link = document.createElement ( "A" ); 26 is 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 processing
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 }