java 实现文件夹上传(springBoot 框架)
有时我们后台管理等服务可能会有这样一个简单需求,就是根据文件夹将整个文件夹下的所有资源都上传到我们的服务器上,本人也是搜索了大量资料,最终以最简单便捷的方式实现该功能,具体操作步骤如下
一、前端如何设置上传组件并将资源上传到后台服务
这里的项目框架为若依VUE版本,下面将核心的代码抽离出来进行代码示例,方便大家快速阅读
1)首先我们需要新建一个用来提交文件夹的form表单
1.添加一个 type=file 的 input 提交组件,添加 webkitdirectory 标识来使用文件夹上传功能 2.添加 @change=“uploadSoundCodeFolder” 事件,当我们上传了文件夹后将触发 uploadSoundCodeFolder() 函数来处理上传逻辑
<form id="uploadSoundCodeFolderForm"
style="display: none" method="post"
enctype="multipart/form-data">
<input id="fileFolder" name="fileFolder" type="file"
@change="uploadSoundCodeFolder" webkitdirectory>
</form>
uploadSoundCodeFolder() 实现逻辑如下
uploadSoundCodeFolder(e){
this.uploadSoundCodeLoading = true;
let files = e.target.files;
let formData = new FormData(document.getElementById("uploadSoundCodeFolderForm"));
uploadSoundCode(formData).then((res)=>{
_this.$message.success("上传成功")
$("#fileFolder").val('');
})
}
2)然后我们添加自己框架内的一些按钮来触发该隐藏的表单
这样做的好处是使用了form文件夹上传的功能,却不用使用他的UI
<el-button v-loading="uploadSoundCodeLoading"
@click="uploadSoundCodeBtn">
上传文件夹
</el-button>
uploadSoundCodeBtn(){
$("#fileFolder").click();
},
二、后台如何接收处理文件夹表单数据
这里我们使用 List fileFolde 类型来接受前端发来的文件集合,fileFolde为表单里面的 name
@RequestMapping(value="/uploadSoundCode",method= RequestMethod.POST)
public AjaxResult uploadSoundCode(List<MultipartFile> fileFolde) throws IOException {
String soundCodeUrl = HereUtil.uploadSoundCode(fileFolder);
return AjaxResult.success(soundCodeUrl);
}
然后根据业务将文件保存到服务器就行了
public static String uploadSoundCode(List<MultipartFile> files) throws IOException {
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
if (StrUtil.isBlank(fileName)){
continue;
}
String fullFilePath = "上传的跟路径" + fileName;
FileUtil.writeFromStream(file.getInputStream(), fullFilePath);
}
return "";
}
|