React Native向Django上传图片失败：请求排查与解决

你的问题核心出在两个地方：

• 手动设置Content-Type: multipart/form-data，导致请求缺少自动生成的boundary参数，Django无法正确解析表单数据
• FormData中直接传入uri字符串，没有以文件对象格式传递，Django识别不到这是合法文件

修复步骤 #

1. 移除手动添加的Content-Type头
   使用FormData作为fetch请求体时，React Native会自动生成包含boundary的multipart/form-data请求头，手动设置反而会破坏解析逻辑。

2. 正确构造FormData中的文件项
   React Native中不能直接传递uri字符串，需要构造包含uri、type、name的对象，让FormData识别为文件。

修改后的代码 #

图片选择函数（优化后）

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images, 
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.canceled){
    // 保存完整的asset对象，方便后续获取type等信息
    setImage(result.assets[0])
  }
};

提交请求代码

const handleSubmit = (name, description, image, email, phone) => {
  var myHeaders = new Headers();
  myHeaders.append("Authorization", `Bearer ${userInfo.access_token}`);
  // 移除手动添加的Content-Type头

  var formdata = new FormData();
  formdata.append("name", name);
  formdata.append("description", description);
  // 构造符合要求的文件对象
  formdata.append("photo", {
    uri: image.uri,
    type: image.type || 'image/jpeg', // 使用ImagePicker返回的类型，无则默认jpeg
    name: image.uri.split("/").pop()
  });
  formdata.append("phone", phone);
  formdata.append("email", email);

  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow'
  };

  fetch(`${Url.base}/api/realtor/create-profile`, requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
}

额外注意 #

• 如果ImagePicker返回的type为空，可根据文件后缀手动指定类型（如.png对应image/png）
• 确保Django后端的photo字段为models.ImageField/models.FileField，且序列化器中使用serializers.ImageField()处理文件上传

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