调用Axios更新头像返回200状态码但头像未更新的问题

核心问题分析 #

1. FormData内容格式错误：你直接把包含uri的普通对象塞进FormData，这不是服务器能识别的文件格式，自然无法解析为图片。
2. 手动设置Content-Type破坏请求结构：发送multipart/form-data请求时，浏览器会自动生成boundary分隔符来分割表单数据，手动设置Content-Type会覆盖这个自动生成的关键部分，导致服务器无法正确解析表单。
3. Base64字符串未转换为可上传的文件对象：fileDataURL是base64格式的字符串，必须先转为Blob或File对象，才能被FormData和服务器正确处理。

修复步骤 #

1. 新增Base64转Blob工具函数 #

function base64ToBlob(base64Data, contentType = 'image/jpeg') {
  const sliceSize = 1024;
  const byteCharacters = atob(base64Data.split(',')[1]);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}

2. 修改提交处理代码 #

将Base64字符串转为Blob后再添加到FormData：

const handleSubmit = e => {
  e.preventDefault();
  // 把base64字符串转成Blob对象
  const imageBlob = base64ToBlob(fileDataURL);
  let profileData = new FormData();
  // 直接添加Blob对象，指定文件名
  profileData.append('profilePic', imageBlob, 'profile_pic.png');
  updateProfilePic(profileData, updatedProfileInfo.user_id);
};

3. 修正Axios请求代码 #

移除手动设置的Content-Type，让Axios自动处理请求头：

const updateProfilePic = (profilePicData, user_id) => {
  console.log('formData contains', ...profilePicData);
  const headers = {
    'accept': 'application/json',
    'Accept-Language': 'en-US,en;q=0.8'
    // 删掉手动设置的Content-Type，Axios会根据FormData自动生成带boundary的正确请求头
  };
  const base_url = 'http://127.0.0.1:8000/update_profile/';
  axios.patch(`${base_url}${user_id}/`, profilePicData, { headers })
    .then(res => {
      console.log('resp', res);
    })
    .catch(err => {
      // 新增错误捕获，方便排查后续问题
      console.error('上传失败', err);
    });
};

验证要点 #

• 确认FormData中添加的是Blob/File对象，而非普通对象
• 查看请求头的Content-Type是否包含boundary字段（例如multipart/form-data; boundary=----WebKitFormBoundaryxxxxxx）
• 核对服务器端接收的字段名是否和FormData中append的profilePic一致

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