ssm 同时接受json数据和图片

采用JSON格式提交数据,controller通过@RequestBody获取数据并且映射到对应的对象去,前端在提交数据的时候需要将HTTP的Headers头里的Content-Type设置成application/json才行。
@RequestBody对应的类型是application/json,而文件Multipart对应的类型是multipart/form-data,这两种格式不兼容,所以无论怎么写都是调用失败的。

解决方法:
将Content-type类型设置为multipart/form-data;
将json数据转为字符串当做一个参数传递,(parm:json_str)
后端通过FastJSON转化。

前段

let fields = $('#info_form').serializeArray();
        //将表单转换成json对象
        let obj = {}; 
        $.each(fields, function (index, field) {
            obj[field.name] = field.value; //通过变量,将属性值,属性一起放到对象中
        })

      
        let  formData = new FormData();
        formData.append('file', $('#imgFile')[0].files[0])
        formData.append('param',JSON.stringify(obj));

        $.ajax({
            url:"${pageContext.request.contextPath}/upload.do",
            type:"post",
            data:formData,
            processData:false,//必须
            contentType:false,//必须
            success:function(data){

                console.log("over..");
            },
            error:function(e){
                alert("错误!!");

            }
        });

后端

@PostMapping("/upload")
    public String uploadFile(MultipartFile file,String param,
             HttpServletRequest request) throws Exception {
        
        System.out.println(param);

        if (file != null && !file.isEmpty()) {
            //  原始名称
            String originalFilename = file.getOriginalFilename();
            //  图片存放的webroot物理路径
            String webroot = request.getServletContext().getRealPath("/");
            //  新图片相对路径
            String filepath = "/upload/"+UUID.randomUUID()
                    + originalFilename.substring(originalFilename.lastIndexOf("." ));
            //  新建图片(物理路径+图片名)
            File realpath = new File(webroot + filepath );
            System.out.println(filepath);
            //  将内存中的数据写入磁盘
            file.transferTo(realpath);

        }
        //  调用服务更新客户信息

        return "show" ;
    }

posted @ 2022-09-21 16:16  awei666  阅读(86)  评论(0编辑  收藏  举报