springboot使用 @RequestPart 解决同时上传文件和json的解决方案

叙述之前公司有一个上传功能是带有业务逻辑的，除了文件之外还有一个json信息的请求。后端是用SpringBoot。当时是把json信息当成字符串用@RequestParam方式传递给后台，后台再手动序列化，一直觉得不太优雅，钻研许久使用@RequestPart解决了问题。但是其中前后端都有一些需要注意的地方，话不多说上源码解决方案前端<body><input type="file

Full Stack Developme

4628人浏览 · 2021-09-29 00:05:26

Full Stack Developme · 2021-09-29 00:05:26 发布

叙述

之前公司有一个上传功能是带有业务逻辑的，除了文件之外还有一个json信息的请求。后端是用SpringBoot 。

当时是把 json 信息当成字符串用 @RequestParam 方式传递给后台，后台再手动序列化，一直觉得不太优雅，钻研许久使用 @RequestPart 解决了问题。

但是其中前后端都有一些需要注意的地方，话不多说上源码

解决方案

前端

<body>
    <input type="file" id="file" name="file"/>
    <button id="button" name="">上传</button>
</body>


$(function () {
    $("#button").click(function () {
        //构建formData
        var formData = new FormData();
        //文件部分
        var file = document.getElementById("file").files[0];
        formData.append("file", file);
        //json部分
        var imageInfo = JSON.stringify({
            "width": "240",
            "height": "320"
        });
        //这里包装 可以直接转换成对象
        formData.append('imageInfo', new Blob([imageInfo], {type: "application/json"}));

        $.ajax({
            url: "/test/upload",
            type: "post",
            //忽略contentType
            contentType: false,
            //取消序列换 formData本来就是序列化好的
            processData: false,
            dataType: "json",
            data: formData,
            success: function (response) {
                alert(response);
            },
            error: function () {

            }
        });
    });
})

后端

@PostMapping("upload")
public ImageInfo upload(@RequestPart("file") MultipartFile file,@RequestPart("imageInfo") ImageInfo imageInfo) {
    System.out.println(imageInfo);
    return imageInfo;
}