需求

需要前后端分离,配合实现上传整个文件夹。
这里的重点是选中整个[文件夹],而不是单文件。
后端使用Java SpringBoot
前端使用Html JavaScript(原生)

事先查过网上的一些方案,查出来后端的批量上传还挺多,
前端的基本都是以htmlform标签作为例子。
实际开发中前端需要的js的例子非常难找,
找到的绝大部分是上传单个文件,于是自己摸索了一番。



实现


后端

  1. @PostMapping("uploadFiles")
  2. @ApiOperation("上传整个文件夹")
  3. public Map<String,Object> uploadFiles(@RequestParam("files") MultipartFile[] files) {
  4. for (MultipartFile file : files) {
  5. System.out.println(file.getOriginalFilename());
  6. // 这里对文件的操作就省略了,可以用file.getInputStream() 来获取文件输入流
  7. }
  8. Map<String, Object> result = new HashMap<>();
  9. result.put("code", 200);
  10. result.put("message", "success");
  11. return R.ok(result);
  12. }

前端

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>文件批量上传demo</title>
  6. </head>
  7. <body>
  8. <h1>文件批量上传demo</h1>
  9. <div>
  10. <h4>Form 方法 (作废)</h4>
  11. <form action="http://localhost:8080/fileupload/demo/uploadFiles" enctype="multipart/form-data"
  12. method="post">
  13. <!-- webkitdirectory 是 chrome、 safari 内核浏览器的上传文件夹 mozdirectory是firefox的上传文件夹 -->
  14. <input type="file" name="files" webkitdirectory mozdirectory/>
  15. <input type="submit" value="提交">
  16. </form>
  17. </div>
  18. <div style="padding-top: 30px">
  19. <h4>JS 方法 (推荐)</h4>
  20. <label>文 件:</label>
  21. <input id="files" type="file" name="files" webkitdirectory mozdirectory/>
  22. <input type="button" value="提交" onclick="uploadFiles()">
  23. <p id="message"></p>
  24. </div>
  25. <script>
  26. function uploadFiles() {
  27. const method = 'POST';
  28. const url = 'http://localhost:8080/fileUpload/demo/uploadFiles';
  29. const message = document.querySelector('#message');
  30. const files = document.querySelector('#files').files;
  31. let xhr = new XMLHttpRequest();
  32. let formData = new FormData();
  33. for (let index in files) {
  34. formData.append('files', files[index]);
  35. }
  36. xhr.open(method, url);
  37. xhr.onreadystatechange = function () {
  38. if (xhr.readyState == 4) {
  39. message.innerText += xhr.responseText + "\n";
  40. }
  41. };
  42. xhr.upload.onprogress = function (event) {
  43. };
  44. xhr.send(formData);
  45. }
  46. </script>
  47. </body>
  48. </html>

需要注意

  1. 后端@RequestParam("files") 中的参数名,与前端formData.append('files', files[index]); 这2边参数名必须对上,否则收到的时候是0个文件。
  2. 前端不要去设置content-type , 浏览器会自动识别的,自己加multipart/form-data ,反而报错
  3. 所有文件都会以二进制形式,装入formData,参数名统一为后台接收时候的参数名。
  4. 理论上xhr.upload.onprogress 可以监控到每一个文件夹的上传进度情况,我这里没需求就没继续深入实现。


END