zoukankan      html  css  js  c++  java
  • 使用@RequestPart同时上传表单数据和文件(转载)

    前端接口上传文件的时候,通常会将请求header的content-type设置为:multipart/form-data, 或者form表单提交的时候将enctype设置为"multipart/form-data" 。

    后端收到请求时由于请求体有@RequestBody 注解标识,通常会用application/json, application/xml处理content-type,此时会报编码格式的问题。

    这时候可以使用@RequestPart参数来接收实体对象,@RequestParam来单个接收参数。

    @RequestPart这个注解用在multipart/form-data表单提交请求的方法上。

    @RequestParam也同样支持multipart/form-data请求。

    @RequestParam和@RequestPart的区别是:@RequestParam适用于name-valueString类型的请求域,@RequestPart适用于复杂的请求域(像JSON,XML)

    代码实现如下

    前端:

    var formData = new FormData();
    // file 为想要上传的文件
    formData.append("file", $("#goods_img_input")[0].files[0]);
    //goodInfo 里面即为想要传到后端的json数据
    var goodInfo = JSON.stringify({
        "goods_id":parseInt($('#goods_id').text()),
        "name": $('#name').val(),
        "price": $('#price').val(),
        "inventory":$('#inventory').val(),
        "details": $('#details').val()
    })
    formData.append('goods', new Blob([goodInfo],{type: "application/json"}));
    
    //发送ajax请求
    $.ajax({
        url: "/goods/addGoods",
        type: "post",
        //忽略contentType
        contentType: false,
        //取消序列换 formData本来就是序列化好的
        processData: false,
        dataType: "json",
        data: formData,
        success: function (res) {
            if (res>0){
                alert("修改成功!");
                window.location.href = "/goods/findAll/1";
            } else {
                alert("修改失败,请联系系统管理员!");
            }
        }
    });

    后端:

    @PostMapping("/updateGoods")
    @ResponseBody
    public void updateGoods(
            @RequestPart("goods")  Goods good,
            @RequestPart("file")  MultipartFile file) {
        System.out.println("good"+good);
        System.out.println("file"+file);
    }

    这样就完成了文件与JSON数据同时上传

  • 相关阅读:
    驱动-问题解决
    Broadcast-广播的接收
    menu-代码添加以及add方法参数意义
    ubuntu-12.04工作区内容变换所属工作区
    $.ajax(),传参要用data
    阻止浏览器默认的事件冒泡行为
    form提交跳转问题
    根据已知值,选中selec中的选项
    option click事件
    按回车键确定
  • 原文地址:https://www.cnblogs.com/Jason-Xiang/p/14611447.html
Copyright © 2011-2022 走看看