如何通过Axios将含图片文件的对象提交至服务器？问题排查

问题描述 #

我有一个表单用于获取用户图片文件，想把包含图片的对象发送到服务器，但服务器接收的对象里图片字段为空，姓名、简介等其他字段正常。设置multipart/form-data请求头时，服务器只收到{"id":1}；不设置该请求头时，服务器收到的对象中UserAvatar字段为{}，其余字段（如UserName、Specialty）都正常。

原代码：

const CompleteProfile = () => {
    const [Name, setName] = useState("tom");
    const [Speciality, setSpeciality] = useState("programmer");
    const [ImageFile, setImageFile] = useState(null);
    const [About, setAbout] = useState("about ");
    
    function handleSubmit(e) {
        e.preventDefault();
        
        const formData = new FormData();
        formData.append("ImageFile", ImageFile);
        const UserChanges = {
            UserName : Name,
            UserAvatar : formData,
            Specialty: Speciality ,
            Summary: About
        }
        axios.post('http://localhost:8000/Image/', UserChanges ,{
            headers: {
              'Content-Type': 'multipart/form-data'
            }})
      .then(response =>{
        return response.data} )
      .catch(error => {
          console.error('There was an error!', error.response.data);
      });
    }
    
    return (
                    <div className="mt-8 md:mt-0 col-span-2 flex items-center md:col-span-1">
                        
                        <input class="block w-full text-sm
                         text-gray-900 bg-gray-50 rounded-lg
                          border border-gray-300 cursor-pointer
                           dark:text-gray-400 focus:outline-none
                            dark:bg-gray-700 dark:border-gray-600
                             dark:placeholder-gray-400"
                            type="file"
                            id="file"
                            onChange={(e)=> setImageFile(e.target.files[0])}
                             />
                        
                    <button
                        className='bg-green-500 hover:bg-green-700
                          text-white 
                        w-fit p-3 rounded-3xl
                        hover:rounded-full
                        
                        '
                        onClick={handleSubmit}
                        >
                        save                    </button>

                </div>



             )
}

export default CompleteProfile

错误原因 #

你把FormData对象嵌套在普通JS对象里发送，这不符合multipart/form-data的传输规则。axios无法正确序列化嵌套的FormData，导致服务器解析异常；手动设置multipart/form-data请求头时，会丢失自动生成的boundary分隔符，服务器无法正确拆分表单字段。

修正方案 #

1. 把所有字段直接添加到同一个FormData对象中，不要嵌套
2. 不要手动设置multipart/form-data请求头，axios会自动根据FormData对象生成包含boundary的正确请求头

修正后的代码：

const CompleteProfile = () => {
    const [Name, setName] = useState("tom");
    const [Speciality, setSpeciality] = useState("programmer");
    const [ImageFile, setImageFile] = useState(null);
    const [About, setAbout] = useState("about ");
    
    function handleSubmit(e) {
        e.preventDefault();
        
        // 校验图片是否选择
        if (!ImageFile) {
            alert("请选择图片文件");
            return;
        }
        
        // 创建FormData并添加所有字段
        const formData = new FormData();
        formData.append("UserName", Name);
        formData.append("UserAvatar", ImageFile);
        formData.append("Specialty", Speciality);
        formData.append("Summary", About);
        
        axios.post('http://localhost:8000/Image/', formData)
          .then(response => {
            console.log("提交成功", response.data);
            return response.data;
          })
          .catch(error => {
              console.error('提交出错！', error.response?.data || error.message);
          });
    }
    
    return (
        <div className="mt-8 md:mt-0 col-span-2 flex items-center md:col-span-1">
            <input 
                className="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
                type="file"
                id="file"
                onChange={(e) => setImageFile(e.target.files[0])}
            />
            <button
                className='bg-green-500 hover:bg-green-700 text-white w-fit p-3 rounded-3xl hover:rounded-full'
                onClick={handleSubmit}
            >
                save
            </button>
        </div>
    )
}

export default CompleteProfile

额外说明 #

• 服务器端需要调整接收逻辑，从multipart/form-data表单字段中读取UserName、UserAvatar等数据，而非解析JSON对象
• 建议在提交前添加图片非空校验，避免无效请求

内容的提问来源于stack exchange，提问作者Masir