簡單介紹

1. 前端傳遞文件參數的時候，通常會使用POST方式傳參,將請求header的content-type設置為:multipart/form-data(因為 GET 請求只能傳遞文本類型的參數，而文件屬于二進制數據，無法直接通過 GET 方式傳遞。)

2. 前端通過POST傳參時,header的content-type設置為"application/json"

3. 前端通過GET方法傳遞參數時，一般不會使用 Content-Type 請求頭，因為 GET 請求的參數是通過 URL 中的查詢字符串參數來傳遞的，不需要使用 Content-Type 請求頭來表示參數的類型

4. 后端接收POST請求請求:參數為JSON對象時,使用@RequestBody 注解標識

5. 后端接收POST請求:參數為文件時,使用(@RequestParam("file") MultipartFile file),(@RequestPart(value = "file", required = true) MultipartFile file) 兩種方式的注解都行

6. 后端接受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));
    }