一、单文件上传

1.前端页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Spring Boot 文件上传测试</title>
</head>
<body>
<form action="/uploadFile" method="post" enctype="multipart/form-data"><input type="file" name="file" /><input type="submit" value="文件上传" />
</form>
</body>
</html>

需要注意的是在文件上传时需要设置form表单的enctype属性为“multipart/form-data”。该页面中包含 “选择文件”和“文件上传”的按钮

2.后端接收

@Controller
public class UploadController {// 文件保存路径为在D盘下的upload文件夹,可以按照自己的习惯来修改private final static String FILE_UPLOAD_PATH = "D:\\upload\\";@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)@ResponseBodypublic String uploadFile(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return "上传失败";}String fileName = file.getOriginalFilename();String suffixName = fileName.substring(fileName.lastIndexOf("."));//生成文件名称通用方法SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");Random r = new Random();StringBuilder tempName = new StringBuilder();tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);String newFileName = tempName.toString();try {// 保存文件byte[] bytes = file.getBytes();Path path = Paths.get(FILE_UPLOAD_PATH + newFileName);Files.write(path, bytes);} catch (IOException e) {e.printStackTrace();}return "上传成功";}
}

@RequestParam中文件名称属性需要与前端页面中input文件输入框设置的name属性一致

D:\upload\这种写法是在Windows系统下的路径写法,如果项目部署在Linux系统中的话,写法与此不同。比如想要把文件上传到/opt/newbee/upload目录下,就需要把路径设置的代码改为private final static String FILE_UPLOAD_PATH = "/opt/newbee/upload/"。

二、多文件 (文件名相同)

1.前端页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Spring Boot 多文件上传测试(file name 相同)</title>
</head>
<body>
<form action="/uploadFilesBySameName" method="post" enctype="multipart/form-data"><input type="file" name="files"/><br><br><input type="file" name="files"/><br><br><input type="file" name="files"/><br><br><input type="file" name="files"/><br><br><input type="file" name="files"/><br><br><input type="submit" value="文件上传"/>
</form>
</body>
</html>

多文件上传页面与单文件上传页面类似,不同点是新增了4个文件输入框,文件输入框的name属性统一命名为files,文件名完全一致。

2.后端接收

@RequestMapping(value = "/uploadFilesBySameName", method = RequestMethod.POST)
@ResponseBody
public String uploadFilesBySameName(@RequestPart MultipartFile[] files) {if (files == null || files.length == 0) {return "参数异常";}if (files.length > 5) {return "最多上传5个文件";}String uploadResult = "上传成功,地址为:<br>";for (MultipartFile file : files) {String fileName = file.getOriginalFilename();if (StringUtils.isEmpty(fileName)) {//表示无文件信息,跳出当前循环continue;}String suffixName = fileName.substring(fileName.lastIndexOf("."));//生成文件名称通用方法SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");Random r = new Random();StringBuilder tempName = new StringBuilder();tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);String newFileName = tempName.toString();try {// 保存文件byte[] bytes = file.getBytes();Path path = Paths.get(FILE_UPLOAD_PATH + newFileName);Files.write(path, bytes);uploadResult += "/upload/" + newFileName + "<br>";} catch (IOException e) {e.printStackTrace();}}return uploadResult;
}

第一,文件参数在接收时的代码改动。在多文件上传并接收参数时使用的是@RequestPart注解,且接收的文件参数是一个数组MultipartFile。而单文件在上传时使用的是@RequestParam注解,接收的文件是单个对象。

第二,文件在保存时增加循环逻辑。多文件保存的处理方式与单文件在上传时比较类似,只是增加了循环逻辑,对接收的MultipartFile数组中每一个文件进行存储操作,最后拼接文件的地址信息并返回。

另外一个需要注意的知识点,多文件上传在接收参数时,参数名称files需要完全对应input框中的name属性。比如本次演示,在upload-same-file-name.html文件中所有文件输入框的name属性都是files;在后端处理时,uploadFilesBySameName()方法的参数名称也定义为files,两个名称是对应的。如果所有文件输入框的name属性都改为uploadFiles,那么uploadFilesBySameName()方法的参数名称也需要改为uploadFiles,否则接收的文件对象数组为空。

三、多文件上传(文件名不同)

1.前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Spring Boot 多文件上传测试(file name 不同)</title>
</head>
<body>
<form action="/uploadFilesByDifferentName" method="post" enctype="multipart/form-data"><input type="file" name="file1"/><br><br><input type="file" name="file2"/><br><br><input type="file" name="file3"/><br><br><input type="file" name="file4"/><br><br><input type="file" name="file5"/><br><br><input type="submit" value="文件上传"/>
</form>
</body>
</html>

 各个input文件输入框的name属性不同。

2.后端接收

@RequestMapping(value = "/uploadFilesByDifferentName", method = RequestMethod.POST)
@ResponseBody
public String uploadFilesByDifferentName(HttpServletRequest httpServletRequest) {List<MultipartFile> multipartFiles = new ArrayList<>(8);// 如果不是文件上传请求则不处理if (!standardServletMultipartResolver.isMultipart(httpServletRequest)) {return "请选择文件";}// 将 HttpServletRequest 对象转换为 MultipartHttpServletRequest 对象,之后读取文件MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) httpServletRequest;Iterator<String> iter = multiRequest.getFileNames();int total = 0;while (iter.hasNext()) {if (total > 5) {return "最多上传5个文件";}total += 1;MultipartFile file = multiRequest.getFile(iter.next());multipartFiles.add(file);}if (CollectionUtils.isEmpty(multipartFiles)) {return "请选择文件";}if (multipartFiles != null && multipartFiles.size() > 5) {return "最多上传5个文件";}String uploadResult = "上传成功,地址为:<br>";for (int i = 0; i < multipartFiles.size(); i++) {String fileName = multipartFiles.get(i).getOriginalFilename();if (StringUtils.isEmpty(fileName)) {//表示无文件信息,跳出当前循环continue;}String suffixName = fileName.substring(fileName.lastIndexOf("."));//生成文件名称通用方法SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");Random r = new Random();StringBuilder tempName = new StringBuilder();tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);String newFileName = tempName.toString();try {// 保存文件byte[] bytes = multipartFiles.get(i).getBytes();Path path = Paths.get(FILE_UPLOAD_PATH + newFileName);Files.write(path, bytes);uploadResult += "/upload/" + newFileName + "<br>";} catch (IOException e) {e.printStackTrace();}}return uploadResult;
}

在读取文件信息时的逻辑是自行实现的代码逻辑,首先调用isMultipart()方法判断当前请求是否为文件上传请求,如果不是则不进行处理。需要注入StandardServletMultipartResolver 调用其方法。

@Autowired
private StandardServletMultipartResolver standardServletMultipartResolver;

回显

Spring Boot 项目中通常使用自定义静态资源映射目录,以此来实现文件上传整个流程的闭环。比如在前文件上传实际案例,在文件上传到upload目录后,会增加一个自定义静态资源映射配置,使得在upload下的静态资源可以通过该映射地址被访问到。

1.新增配置类,实现代码如下所示:

@Configuration
public class NeeBeeMallWebMvcConfigurer implements WebMvcConfigurer {public void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/upload/**").addResourceLocations("file:D:\\upload\\");}
}

通过以上代码配置,所有以“/upload/”开头的静态资源在请求时都会映射到D盘的upload目录下。路径的设置与前文中上传文件的设置目录类似,不同系统的文件路径的写法不同(比如Linux和Windows)。同时需要注意在设置静态资源映射路径时,路径前需要添加“file:”前缀。 

配置

只要在pom.xml文件中引入了spring-boot-starter-web依赖即可直接调用文件上传功能。虽然不用配置也可以使用文件上传功能,但是开发人员在文件上传时也可能有一些特殊的需求。因此,这里需要对Spring Boot中MultipartFile的常用设置进行介绍,其配置项和默认值如下所示。

  • spring.servlet.multipart.enabled

    是否支持 multipart 上传文件,默认支持

  • spring.servlet.multipart.file-size-threshold

    文件大小阈值,当大于这个阈值时将写入到磁盘,否则存在内存中,(默认值 0 ,一般情况下不用特意修改)

  • spring.servlet.multipart.location

    上传文件的临时目录

  • spring.servlet.multipart.max-file-size

    最大支持文件大小,默认 1 M ,该值可适当的调整

  • **spring.servlet.multipart.max-request-size=10Mb **

    最大支持请求大小,默认 10 M

  • spring.servlet.multipart.resolve-lazily

    判断是否要延迟解析文件(相当于懒加载,一般情况下不用特意修改

Spring Boot文件上传及回显(单/多文件)相关推荐

  1. themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...

    实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...

  2. element UI el-upload组件实现视频文件上传视频回显

    项目中需要提供一个视频介绍,使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL, 百度找了一番后最终实现了. HTML <el ...

  3. vue2 + elementui el-upload文件上传后回显及重新提交思路

    回显: :file-list="fileList" 可用于预览图片列表,数组内的对象格式为{name: '', url:"'}. 文件上传后,需让后端返回文件标识和服务器 ...

  4. bootstrap fileinput 文件上传和回显

    官网下载文件http://plugins.krajee.com/file-input/demo bootstrap fileinput 是基于bootstrap基础上的上传插件,so必要的bootst ...

  5. springboot实现简单的文件上传与回显

    前端页面 input的file类型可以将上传文件的绝对路径返回给后台. <!DOCTYPE html> <html lang="en" xmlns:th=&quo ...

  6. Spring Boot (30) 上传文件

    文件上传 上传文件和下载文件是Java Web中常见的一种操作,文件上传主要是将文件通过IO流传输到服务器的某一个文件夹下. 导入依赖 在pom.xml中添加上spring-boot-starter- ...

  7. php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...

  8. element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显

    Vue+ElementUI+SpringMVC实现图片上传和table回显 而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...

  9. Vue+ElementUI+SpringMVC实现图片上传和回显

    Vue+ElementUI+SpringMVC实现图片上传和table回显 在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...

最新文章

  1. 2021fall Broadway Tech校招
  2. 中国工程院谭建荣:人工智能应用得再好,最核心的算法不行,创新能力就不行丨MEET2021...
  3. Office协同办公:SkyDrive
  4. 各种排序算法的讲解与代码实现
  5. 怎样隐藏“滚动条”?
  6. MATLAB粒子模拟代码注释
  7. 牛客16437 买铅笔
  8. myeclipse导入项目报错Target runtime Apache Tomcat v8.0 is not defined
  9. 使用TensorFlow.js的AI聊天机器人二:训练Trivia Expert AI
  10. 原 oracle执行update一直处于执行中,跟卡住一样
  11. [转载] Python中 hash去重
  12. Gravatar是什么?全球通用头像简单介绍与使用教程
  13. oracle10g 数据源管理器找不到应用程序,可能是程序没有正确安装问题解决
  14. 深度学习面试题之CNN
  15. WORD 或者 Outlook 提示“无法创建工作文件,请检查临时环境变量” 的解决方法
  16. win8计算机无法安装打印机驱动,如果Win8计算机打印机驱动程序安装失败,该怎么办...
  17. matlab伽玛分布如何表示,matlab绘制gamma曲线
  18. IDEA更换背景图片
  19. 动态二维码签到系统~第一节(Python动态二维码生成)
  20. invoice-message【发票样式模板】使用

热门文章

  1. js循环发起ajax请求
  2. potplayer 怎么用鼠标左键单击播放暂停
  3. 基于Android studio的备忘录app设计
  4. Vue动态添加、删除对象属性
  5. linux系统安装chromium,Centos6.4下安装chromium
  6. RPC框架项目的学习
  7. 【JavaEE基础与高级 第1章】— 基础知识1初识JavaEE
  8. DHCP协议(或许是最详细的版本)
  9. eolinker本地部署教程
  10. Aixcode的安装以及基本使用