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

mdi-chevron-left

Docker 中的 Mysql Tomcat 容器时间慢8小时解决方案

mdi-chevron-right

Centos 7.7 从零安装部署生产环境 Docker Nginx JDK Tomcat Mysql Redis

提交

评论区空空如也，赶紧添加一条评论吧评论 {{counts.commentCount}}

关于我

留言板

需求

实现

后端

前端

需要注意

END

上一篇

Docker 中的 Mysql Tomcat 容器时间慢8小时解决方案

下一篇

Centos 7.7 从零安装部署生产环境 Docker Nginx JDK Tomcat Mysql Redis

网址导航

需求

实现

后端

前端

需要注意

END

上一篇

Docker 中的 Mysql Tomcat 容器时间慢8小时 解决方案

下一篇

Centos 7.7 从零安装部署生产环境 Docker Nginx JDK Tomcat Mysql Redis

网址导航

Docker 中的 Mysql Tomcat 容器时间慢8小时解决方案