Axios传文件到Spring Kotlin接口报bookTitle非空参数为空故障求助

云上老周

2026-9-23

问题根因

请求格式不匹配：你当前直接传递普通JS对象作为请求体，Axios默认会将其序列化为JSON格式，但后端@ModelAttribute注解是接收multipart/form-data格式的表单参数，JSON格式无法被后端解析，导致所有参数都被识别为null，触发Kotlin非空参数的空指针异常。你用Postman调用正常是因为Postman选择form-data格式时，自动构造了符合要求的请求结构。
文件取值错误：handleFileChange方法中你通过e.target.value获取文件，拿到的只是浏览器做了安全处理的虚假本地路径字符串，不是后端需要的实际File对象。
若你的APIService.config中手动指定了Content-Type: application/json，也会强制请求用JSON格式发送，导致参数解析失败。

修复步骤

1. 修正文件取值逻辑

修改handleFileChange方法，正确获取选中的文件对象：

const handleFileChange = (e) => {
    // 取用户选中的第一个文件对象
    setBook(e.target.files[0])
}

2. 替换请求体为FormData格式

修改handleBookAddSubmit方法，用FormData构造符合multipart/form-data要求的请求参数：

const handleBookAddSubmit = (e) => {
    e.preventDefault();

    console.log(book , bookTitle, bookDescription)

    // 构造FormData对象
    const formData = new FormData()
    formData.append('bookTitle', bookTitle)
    formData.append('bookDescription', bookDescription)
    formData.append('bookFile', book)

    // 直接传递FormData，Axios会自动设置带boundary的multipart/form-data请求头
    axios.post('http://localhost:8989/books/add', formData, APIService.config).then(response => {
        console.log(response.data)
    }).catch((err) => {
        console.warn('error during http call adding book', err);
        console.warn('error during http call adding book Response: ', err.response);
    });
}