SpringBoot JavaScript 前后端 实现文件夹 批量上传
2020-03-30
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
需求
需要前后端分离,配合实现上传整个文件夹。
这里的重点是选中整个[文件夹],而不是单文件。
后端使用Java
SpringBoot
前端使用Html
JavaScript(原生)
事先查过网上的一些方案,查出来后端
的批量上传还挺多,
前端
的基本都是以html
的form
标签作为例子。
实际开发中前端需要的js的例子非常难找,
找到的绝大部分是上传单个文件,于是自己摸索了一番。
实现
后端
@PostMapping("uploadFiles")
@ApiOperation("上传整个文件夹")
public Map<String,Object> uploadFiles(@RequestParam("files") MultipartFile[] files) {
for (MultipartFile file : files) {
System.out.println(file.getOriginalFilename());
// 这里对文件的操作就省略了,可以用file.getInputStream() 来获取文件输入流
}
Map<String, Object> result = new HashMap<>();
result.put("code", 200);
result.put("message", "success");
return R.ok(result);
}
前端
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>文件批量上传demo</title>
</head>
<body>
<h1>文件批量上传demo</h1>
<div>
<h4>Form 方法 (作废)</h4>
<form action="http://localhost:8080/fileupload/demo/uploadFiles" enctype="multipart/form-data"
method="post">
<!-- webkitdirectory 是 chrome、 safari 内核浏览器的上传文件夹 mozdirectory是firefox的上传文件夹 -->
<input type="file" name="files" webkitdirectory mozdirectory/>
<input type="submit" value="提交">
</form>
</div>
<div style="padding-top: 30px">
<h4>JS 方法 (推荐)</h4>
<label>文 件:</label>
<input id="files" type="file" name="files" webkitdirectory mozdirectory/>
<input type="button" value="提交" onclick="uploadFiles()">
<p id="message"></p>
</div>
<script>
function uploadFiles() {
const method = 'POST';
const url = 'http://localhost:8080/fileUpload/demo/uploadFiles';
const message = document.querySelector('#message');
const files = document.querySelector('#files').files;
let xhr = new XMLHttpRequest();
let formData = new FormData();
for (let index in files) {
formData.append('files', files[index]);
}
xhr.open(method, url);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
message.innerText += xhr.responseText + "\n";
}
};
xhr.upload.onprogress = function (event) {
};
xhr.send(formData);
}
</script>
</body>
</html>
需要注意
后端
的@RequestParam("files")
中的参数名,与前端
的formData.append('files', files[index]);
这2边参数名必须对上,否则收到的时候是0个文件。- 前端不要去设置
content-type
, 浏览器会自动识别的,自己加multipart/form-data
,反而报错 - 所有文件都会以二进制形式,装入
formData
,参数名统一为后台接收时候的参数名。 - 理论上
xhr.upload.onprogress
可以监控到每一个文件夹的上传进度情况,我这里没需求就没继续深入实现。
END
评论区空空如也,赶紧添加一条评论吧
评论 {{counts.commentCount}}

{{comment.name}}
{{comment.os}}
{{comment.browser}}

{{comment.reply.name}}
{{comment.reply.os}}
{{comment.reply.browser}}
