SpringBoot 文件上传（一)

TOKI不吃海鲜

已于 2024-03-24 16:24:40 修改

阅读量534

点赞数 10

分类专栏： JavaWeb学习笔记文章标签： spring boot 后端 java 文件上传

于 2024-03-23 20:13:37 首次发布

本文链接：https://blog.csdn.net/qq_42736179/article/details/136970481

版权

JavaWeb学习笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

应用场景

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

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

前端页面三要素

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

前端页面三要素：

请求方式是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();
    }