SpringBoot JavaScript 前后端实现文件夹批量上传

home 编辑时间 2020/03/13

![](/api/file/getImage?fileId=5e6b4c0d16199b501c005833)

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

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

## 实现

#### 后端
```java
@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);
}
```
#### 前端
```html
<!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">
        
        <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>
```

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

## END

送人玫瑰,手留余香