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 <