前端上传文件夹或文件至后端（SpringBoot）

最新推荐文章于 2024-07-05 18:28:09 发布

Charo n.

最新推荐文章于 2024-07-05 18:28:09 发布

阅读量4.6k

点赞数 2

分类专栏： Spring Boot 文章标签：前端 spring boot java

本文链接：https://blog.csdn.net/weixin_48581386/article/details/129659070

版权

Spring Boot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端通过input标签的file和webkitdirectory属性实现文件夹选择上传，后端使用MultipartHttpServletRequest接收并处理上传的文件。在表单中设置enctype和POST方法，指定后端接口地址。虽然webkitdirectory通常限制选择文件夹，但在某些情况下可能仍能选择单个文件。

摘要由CSDN通过智能技术生成

前端

前端上传文件夹使用的是input标签的file属性,最重要的是webkitdirectory这个属性，有了这个属性之后input才可以选择文件夹，但也只能选择文件夹了。
在webkitdirectory的官方文档里有对该属性的说明。

<input type="file" id="folder" name="file" webkitdirectory multiple />

我们可以在这基础上做延伸，做一个表单来上传文件夹：

<form action="#" method="POST" enctype="multipart/form-data">
	<input id="folder" type="file" name="file" webkitdirectory/>
	<input type="submit" value="上传文件夹"/>
</form>

form要加上enctype=“multipart/form-data”，method用的是POST，action写的是后端上传方法的接口，例如：http://localhost:8080/file/upload

效果是这样的
在这里插入图片描述
有点简陋，但不碍事。

后端

前端把文件夹传给后端后，后端该怎么接收呢？

	@PostMapping("/qnupload")
    public String qiniuUpload(HttpServletRequest request) throws IOException {
        MultipartHttpServletRequest params = ((MultipartHttpServletRequest) request);
        List<MultipartFile> files = params.getFiles("file");
        for (int i=0; i < files.size();i++) {
            kodeUploadServiceImpl.uploadFiles(files.get(i));
            System.out.println("success:" + files.get(i));
        }
        return "complete";
    }

HttpServletRequest接收，然后将request转型为MultipartHttpServletRequest，再通过getFiles方法获得List，我们就可以对List做遍历来处理每个文件了。

最后，如果想上传文件的话就要在开个form表单，去掉webkitdirectory属性就好了，再加个multiple属性就可以多选了，因为理论上用了webkitdirectory属性就不能选择文件了，但是嗷，我把项目放服务器上测试的时候，室友用ipad打开网站后上传了个图片文件成功了，具体原因我也没搞懂。