Spring Boot实现文件上传

简介: Spring Boot实现文件上传

文件上传是网页常见的一个表单提交形式。实质上,文件上传是前端发送一个POST请求,后端接收即可。不过在Spring Boot中怎么实现文件上传呢?

一、上传单个文件

(1) 前端

先做一个简易的表单,代码如下:

<formenctype="multipart/form-data"method="POST"action="/upload"><inputtype="text"name="imgName"/><inputtype="file"name="imgFile"/><inputtype="submit"value="upload"/></form>

需要注意的是我们如果要上传文件,必须设定表单为multipart/form-data格式,上面的标签中的enctype属性就是设定表单数据格式的属性。

即指定了表单该条目为文件类型。

网络异常,图片无法展示
|

如果不想使用form标签中的按钮,而是自己组装数据,可以写如下函数:

/** * 上传文件函数 * @param {*} requestURL 请求地址 * @param {*} file 文件(input对象的文件) */functionupload(requestURL, file) {
letform=newFormData(); //新建表单对象form.append('img', file); //向表单对象添加文件,名字为imgfetch(requestURL, {
method: 'POST',
body: form  }).then((response) => {
returnresponse.json();
  }).then((result) => {
//请求完成后对结果的处理console.log(result);
  })
}

其中获取input标签中的file

letinput=document.querySelector('input'); //查询到input标签letfile=input.files[0]; //input的属性files表示选择的文件数组,如果是单文件就指定下标0

注意可以不用指定fetch中的headerscontent-type,发送FormData对象可以自行适配。

(2) 后端

先在Spring Boot配置文件application.properties中配置文件上传大小限制,因为其默认限制是1mb,所以上传文件稍大就会失败:

# 设置内置Tomcat请求大小为20MB
server.tomcat.max-http-form-post-size=20MB
# 设置请求最大大小为20MB
spring.servlet.multipart.max-request-size=20MB
# 设置文件上传最大大小为20MB
spring.servlet.multipart.max-file-size=20MB

三个选项最好是都设定一下,如果想无限制可以都填-1

然后在Controller类中写如下方法:

@PostMapping("/upload")
publicStringupload(@RequestParam("imgFile") MultipartFilefile, @RequestParam("imgName") Stringname) throwsException {
// 设置上传至项目文件夹下的uploadFile文件夹中,没有文件夹则创建Filedir=newFile("uploadFile");
if (!dir.exists()) {
dir.mkdirs();
    }
file.transferTo(newFile(dir.getAbsolutePath() +File.separator+name+".png"));
return"上传完成!文件名:"+name;
}

需要注意的是,上传过来的文件在Java中是MultipartFile类型,@RequestParam中的值即为我们前端表单每一项(input标签)里面的name属性值,或者是使用FormData对象append时对应的那个名字,要一一对应,必须相同。前端表单中的action属性即为表单提交至的地址,对应我们Controller的@PostMapping中的值。

MultipartFile实例通过使用方法transferTo方法实现把上传的文件保存至指定位置。

效果:

网络异常,图片无法展示
|

文件也上传至了指定位置:

网络异常,图片无法展示
|

注意最好是使用@RequestParam逐个接受参数,因为@RequestBody不支持multipart类型,参数多了可以分接口接收。

二、上传多个文件

上传多个文件其实也很简单,和上面上传单个文件差别不大。在前端的这一条表示文件的条目标签中加入属性multiple即可,我的代码如下:

<formenctype="multipart/form-data"method="POST"action="/upload"><inputtype="text"name="imgColName"/><inputtype="file"name="imgFile"multiple/><inputtype="submit"value="upload"/></form>

这时,再上传文件时后端接收到的是MultipartFile数组,因此在上述的Controller方法中的对应的形参改成MultipartFile[]类型即可,然后遍历操作,具体例子如下:

@PostMapping("/upload")
publicStringupload(@RequestParam("imgFile") MultipartFile[] files, @RequestParam("imgColName") Stringname) throwsException {
Filedir=newFile("uploadFile");
if (!dir.exists()) {
dir.mkdirs();
    }
for (MultipartFilefile : files) {
file.transferTo(newFile(dir.getAbsolutePath() +File.separator+file.getOriginalFilename()));
    }
return"上传完成!图集名:"+name;
}

示例程序仓库地址

相关文章
|
2月前
|
前端开发 Java Apache
Spring Boot文件上传与下载讲解与实战(超详细 附源码)
Spring Boot文件上传与下载讲解与实战(超详细 附源码)
134 0
|
8天前
|
XML 监控 druid
【Java专题_02】springboot+mybatis+pagehelper分页插件+druid数据源详细教程
【Java专题_02】springboot+mybatis+pagehelper分页插件+druid数据源详细教程
32 0
|
2月前
|
JSON 前端开发 Java
Spring mvc-文件上传与JSON-学习笔记
Spring mvc-文件上传与JSON-学习笔记
35 2
|
2月前
|
前端开发 JavaScript Java
Spring Boot中Spring MVC的基本配置讲解与实战(包括静态资源配置,拦截器配置,文件上传配置及实战 附源码)
Spring Boot中Spring MVC的基本配置讲解与实战(包括静态资源配置,拦截器配置,文件上传配置及实战 附源码)
21 1
|
3月前
|
存储 Java Maven
如何使用Spring Boot和MinIO实现文件上传、读取、下载和删除的功能?
如何使用Spring Boot和MinIO实现文件上传、读取、下载和删除的功能?
138 5
|
3月前
|
Java 测试技术
Springboot集成JUnit5优雅进行单元测试
Springboot集成JUnit5优雅进行单元测试
|
4月前
|
存储 前端开发 Java
学会Spring MVC文件上传、下载和JRebel的使用
学会Spring MVC文件上传、下载和JRebel的使用
27 0
学会Spring MVC文件上传、下载和JRebel的使用
|
4月前
|
前端开发 JavaScript Java
解决Spring Boot文件上传问题:`MultipartException` 和 `FileUploadException`
解决Spring Boot文件上传问题:`MultipartException` 和 `FileUploadException`
114 0
|
6月前
|
存储 前端开发 Java
Spring Boot之文件上传:实现简单易用的文件上传功能
本篇详细介绍了在Spring Boot应用中实现文件上传功能的步骤。从创建前端页面、编写Controller处理、文件存储与访问、添加路由与页面展示等方面进行了详细讲解,并提供了代码示例。通过学习本文,读者可以轻松了解如何在Spring Boot项目中实现简单易用的文件上传功能,从而在实际应用中更好地满足用户需求。
228 0
Spring Boot之文件上传:实现简单易用的文件上传功能
|
6月前
|
前端开发 Java Maven
案例14 Spring MVC文件上传案例
基于Spring MVC实现文件上传: 使用commons-fileupload实现上传文件到本地目录。 实现上传文件到阿里云OSS和从阿里云OSS下载文件到本地。
88 0

相关产品

  • 云迁移中心