React Native Fetch上传含图片FormData：iOS正常Android报400错误

1. 修复FormData构建逻辑的循环错误 #

你的buildFormData函数存在逻辑错误：return data放在了for循环内部，这会导致只处理第一张图片就提前返回，后续图片无法添加到FormData中，同时userForm的添加逻辑也不合理。修正如下：

const buildFormData = () => {
  const data = new FormData();
  // 循环添加所有图片
  for (let i = 0; i < photoForm.photosToUpload.length; i++) {
    const photo = photoForm.photosToUpload[i];
    console.log(photo.uri);
    data.append('photosToUpload', {
      uri: photo.uri,
      name: photo.fileName,
      type: 'image/jpeg'
    });
  }
  // 仅添加一次userForm，放在循环外部
  data.append("userForm", JSON.stringify(userForm));
  console.log(data);
  return data;
};

2. 移除手动设置的Content-Type头 #

手动设置'Content-Type': 'multipart/form-data'会导致Fetch无法自动生成正确的boundary分隔符，服务器无法解析multipart数据，这是Android端报错的核心原因之一。Fetch会自动根据FormData生成包含boundary的Content-Type，所以只需删除该头：

export const createUser = (formData) => async (dispatch) => {
  try {
    const response = await fetch('https://c66d-2a02-a03f-a5a1-e400-1573-78c6-e019-e601.eu.ngrok.io/create_user', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        // 移除手动设置的Content-Type
      },
      body: formData,
    });

    // 先检查响应状态，避免解析非JSON内容报错
    if (!response.ok) {
      const errorText = await response.text();
      console.error('服务器返回错误:', errorText);
      throw new Error(`请求失败: ${response.status}`);
    }

    const responseJson = await response.json();
    console.log(responseJson);
    // 处理成功响应逻辑
  } catch (error) {
    console.error(error);
    // 处理错误逻辑
  }
};

3. 适配Android的URI格式 #

React Native在Android上获取的图片URI通常是content://开头的，而FormData在Android上需要正确的文件路径才能被识别。可以通过以下方式处理：

• 如果是相机拍照获取的URI，确保使用file://开头的路径；
• 手动转换content://为file://（部分场景适用，注意权限问题）：

  import { Platform } from 'react-native';
  
  const fixAndroidUri = (uri) => {
    if (Platform.OS === 'android' && uri.startsWith('content://')) {
      return uri.replace('content://', 'file://');
    }
    return uri;
  };
  
  // 在buildFormData中使用：
  data.append('photosToUpload', {
    uri: fixAndroidUri(photo.uri),
    name: photo.fileName,
    type: 'image/jpeg'
  });
  

4. 检查Django服务器端接收逻辑 #

确保服务器正确处理multipart/form-data请求：

• 使用request.FILES.getlist('photosToUpload')获取多张图片；
• 使用request.POST.get('userForm')获取JSON字符串后再解析：

  import json
  from django.http import JsonResponse
  
  def create_user(request):
      if request.method == 'POST':
          photos = request.FILES.getlist('photosToUpload')
          user_form_str = request.POST.get('userForm')
          user_form = json.loads(user_form_str)
          # 后续业务逻辑
          return JsonResponse({'status': 'success'})
  

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