el-upload上传文件夹及springboot后端实现
点击右面的上传图标选择文件夹
1、前端
前端用的vue2
<el-upload
:action="upFiles"
:data="{path: wfLabel[i].label_path}"
:show-file-list="false"
ref="uploadlist"
:multiple="true"
:on-success="handleAvatarSuccess(i, index)"
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-upload" ></i>
用el-upload标签multiple=“true”,上传文件夹原理是单个文件批量上传
mounted() {
this.$refs.uploadlist[0].$children[0].$refs.input.webkitdirectory = true;
},
this.$refs.uploadlist[0].$children[0].$refs.input.webkitdirectory = true;
放置位置视情况而定
2、后端
我的用户端和服务器在一台机器上,后端实现就直接复制
/**
* Auto-Calphad上传文件夹到指定目录 *
* @param
* path:指定目录
* @return
*/
@PostMapping(value = "/uploadFiles")
public AjaxResult uploadFiles(MultipartFile file,String path) throws IOException {
String originalFilename = file.getOriginalFilename();
File filetem = File.createTempFile("temp", null);
file.transferTo(filetem); //sourceFile为传入的MultipartFile
File newfile = new File(path+"\\input-data"); //获取新的文件File对象并生成文件
if (!(new File(path+"\\input-data")).exists()) { //判断目标文件夹是否存在不存在则创建
(new File(path+"\\input-data")).mkdirs();
}
FileInputStream in = new FileInputStream(filetem); //
FileOutputStream out = new FileOutputStream(newfile+"\\"+originalFilename);
byte[] buffer=new byte[2097152];
int readByte = 0;
//读取旧文件的流写入新文件里
while((readByte = in.read(buffer)) != -1){
out.write(buffer, 0, readByte);
}
in.close();
out.close();
Map map=new HashMap();
map.put("name","input-data");
return AjaxResult.success(map);
}
这种实现方式访问了多次后端接口。