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

朱雀 2022-09-13 13:24 754阅读 0赞

# 叙述 #

之前公司有一个上传功能是带有业务逻辑的，除了文件之外还有一个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;
    }