尝试使用上传文件进行 POST 调用时出现 HTTP 400 错误

Question

我在 Java 控制器中定义了一个与文件上传相关的端点，如下所示；

@RequestMapping(value = "/upload/file", method = { RequestMethod.POST})
public MyResponse<?> uploadFile(@RequestHeader(required = true) String country, @RequestHeader(required = true) String user, @RequestParam("file") MultipartFile file)
{
}

我正在尝试从 UI 中调用它，如下所示；

const response = await MyReactUtility.postMultipartFileContent(endpoint, result);

postMultipartFileContent(url, data) {
    let formData = new FormData();
    formData.append("file", data.files[0]);
    return axios.post(url, formData).catch(err => console.log("Axios multipart err: ", err));
},

传递给上面“postMultipartFileContent”的我的“data”参数如下所示；

在 Chrome 网络选项卡中，我可以看到有效负载为；

Form Data
    file: (binary)

但是，我看到 400 Bad Request 错误。

Answer 1

问题可能与标头或您在前端处理文件的方式有关。 试试这个：

const response = await MyReactUtility.postMultipartFileContent(endpoint, result);

postMultipartFileContent(url, data) {
    let formData = new FormData();
    formData.append("file", data.files[0]);
    return axios.post(url, formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
            'country': 'your_country_value', // Replace with actual country value
            'user': 'your_user_value' // Replace with actual user value
        }
    }).catch(err => console.log("Axios multipart err: ", err));
}

您可以根据您的需要更改价值用途。