SpringBoot 文件上传（一)-编程知识

SpringBoot 文件上传（一)

应用场景

文件上传是指将本地图片、音频、视频等文件上传至服务器的过程，应用场景非常多。

比如：更新头像、交作业上传作业文件、发微博微信时上传图片等。

前端页面三要素

上图显示前端页面的三要素以及对应的页面样式

前端页面三要素：

请求方式是post。因为文件比较大，一般情况下都使用post方式。
表单的编码格式为mutipart/form-data。因为普通默认的编码格式是不适用于大型的二进制文件的。
上传文件对应的表单项类型是file

实际操作

前端页面放置位置

将前端页面放置在src/main/resources/static目录下

鼠标放置在属性名上，会显示对应的解释

建议使用火狐浏览器进行测试，因为chorm浏览器将请求数据封装了

利用开发者工具查看请求数据

点击F12，打开开发者工具

提交表单，查看开发者工具中的网络一栏

点击Post请求，首先查看请求头，点击“原始”

可以看到Content-Type(数据内容类型）是前端指定的mutipart/form-data，后面所接的boundary代表表单会分为多个部分提交，且每个部分之间都会有一个分隔符。

接下来确认请求体，点击“请求”

后端接收文件

后端要编写相应的代码接收浏览器传递的数据

新建一个UploadController类，标明注释

@RestController
@Slf4j
public class UploadController {}

创建和前端请求路径相同、方式相同的方法

@RestController
@Slf4j
public class UploadController {@PostMapping("/upload")public Result upload() {}
}

书写对应的请求参数：

特别注意文件的参数类型（MultipartFile）
参数名要和前端表单项的名字对应，如果不同要用@RequestParam声明

public Result upload(String username, Integer age, @RequestParam("image") MultipartFile Myimage) {}

对应的前端代码是：

    <form action="/upload" method="post" enctype="multipart/form-data">姓名: <input type="text" name="username"><br>年龄: <input type="text" name="age"><br>头像: <input type="file" name="image"><br><input type="submit" value="提交"></form>

记录日志

 @PostMapping("/upload")public Result upload(String username, Integer age,MultipartFile image){log.info("文件上传：{},{},{}",username,age,image);return Result.success();}