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 }
原文地址：https://www.cnblogs.com/Actexpler-S/p/11104907.html
时间： 2024-10-10 22:46:38