随笔分类

随笔档案

阅读排行榜

@RequestPart-Java接口,同时传参JSON对象数据和文件

简单介绍

前端传递文件参数的时候，通常会使用POST方式传参,将请求header的content-type设置为:multipart/form-data(因为 GET 请求只能传递文本类型的参数，而文件属于二进制数据，无法直接通过 GET 方式传递。)
前端通过POST传参时,header的content-type设置为"application/json"
前端通过GET方法传递参数时，一般不会使用 Content-Type 请求头，因为 GET 请求的参数是通过 URL 中的查询字符串参数来传递的，不需要使用 Content-Type 请求头来表示参数的类型
后端接收POST请求请求:参数为JSON对象时,使用@RequestBody 注解标识
后端接收POST请求:参数为文件时,使用(@RequestParam("file") MultipartFile file),(@RequestPart(value = "file", required = true) MultipartFile file) 两种方式的注解都行
后端接受POST请求:参数为JSON对象+文件时:这时候可以使用@RequestPart参数来接收实体对象，@RequestParam来单个接收参数

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

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

@RequestParam和@RequestPart的区别是：@RequestParam适用于name-valueString类型的请求域，@RequestPart适用于复杂的请求域（像JSON，XML）

详细例子

传很多个参数

将传参header的content-type设置为:multipart/form-data ,将每个参数都当做文件进行传参(字段类型不同,文件为MultipartFile类型 ,文件数组为MultipartFile[]类型,其他为String类型) (前端很容易设置)
Postman测试接口工具

Java后端代码:注解全用@RequestParam ,全部用这一个注解接收参数(可行)

   @PostMapping("/addDirectlySellGoods")
   public Resource<String> addDirectlySellGoods(@RequestParam("goodsPicture") MultipartFile[] goodsFile, @RequestParam("certPicture") MultipartFile[] certFile,
                                                 @RequestParam("goodsName") String goodsName, @RequestParam("goodsType") String goodsType, 
                                                 @RequestParam("goodsFee") String goodsFee, @RequestParam("sellerPosition") String sellerPosition, 
                                                 @RequestParam("wechatAcct") String wechatAcct, @RequestParam("goodsDesc") String goodsDesc) {
       InDirectlySellDto in = new InDirectlySellDto();
       in.setGoodsName(goodsName);
       in.setGoodsType(goodsType);
       in.setGoodsFee(goodsFee);
       in.setSellerPosition(sellerPosition);
       in.setWechatAcct(wechatAcct);
       in.setGoodsDesc(goodsDesc);
       System.out.println("直接卖前端传递的参数:" + in);
       String data = consignmentService.addDirectlySellGoods(goodsFile,certFile,in);
       //String data = "COMMON_SUCCESS";
       return new Resource<>(props.getProcessStatus(data));
   }

自己项目中写的前端代码：
也是用于传输多个图片以及两个值经纬度

<script>
    function submitForm() {
        var formData = new FormData();
        var files = document.getElementById('files').files;
        for (var i = 0; i < files.length; i++) {
            formData.append('files', document.getElementById('files').files[i]);
        }
        formData.append('lng', document.getElementById('lng').value);
        formData.append('lat', document.getElementById('lat').value);

        fetch('/ComprehensiveScoring/getScore', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                // 假设后端返回的是JSON格式的数据
                document.getElementById('scoreValue').innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('scoreValue').innerHTML = '<p>Error occurred.</p>';
            });
        // 由于是按钮点击事件，不需要阻止表单的默认提交行为
    }

</script>

传一个文件参数+一个JSON对象

前端需将传参header的content-type , 通过判断设置为两种multipart/form-data + application/json(需百度自行查询,前端可能不容易设置)
Postman测试接口工具

ava后端代码:注解全用@RequestPart ,全部用这一个注解接收参数(可行)

@Validated 注解:用于验证 Java 对象中的属性是否符合验证规则(未仔细研究,不加一般也不会报错)，可以提高代码的可读性和可维护性，同时也可以避免一些常见的错误，如空指针异常等

   /**
     * 数据上报接⼝
     */
    @PostMapping("/dataReport")
    public Resource<String> dataReport(@RequestPart(value = "file", required = true) MultipartFile file ,@RequestPart @Validated DataReportInDto dto){
        String code = dataReportService.dataReport(file,dto);
        return new Resource<>(props.getProcessStatus(code));
    }