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

叙述

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

  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值