React Native Expo使用FormData+Fetch上传文件遇Network request failed问题排查

1. 修正FormData中文件的type字段 #

你代码里给file的type传的是数值1，不符合HTTP文件上传规范，服务器无法识别正确文件类型。需改为对应MIME类型，比如JPG图片用image/jpeg：

formData.append('file', {
    uri: selectedImage,
    type: 'image/jpeg', // 替换为正确的MIME类型
    name: 'image.jpg'
});

2. 处理Expo图片URI的平台格式差异 #

Expo获取的图片URI在不同平台有格式区别：

• Android端URI通常以file://开头，需去掉前缀改为/storage/...格式
• iOS端URI可直接使用
  添加格式处理函数：

import { Platform } from 'react-native';

const fixImageUri = (uri) => {
  if (Platform.OS === 'android' && uri.startsWith('file://')) {
    return uri.replace('file://', '');
  }
  return uri;
};

// 使用时替换原uri
formData.append('file', {
    uri: fixImageUri(selectedImage),
    type: 'image/jpeg',
    name: 'image.jpg'
});

3. 禁止手动设置Content-Type请求头 #

当请求body为FormData时，Fetch会自动生成包含boundary的multipart/form-data请求头，手动设置会导致服务器无法解析FormData。确保headers仅保留Authorization：

const headers = {
    'Authorization': `Bearer ${token}`
    // 不要添加 'Content-Type': 'multipart/form-data'
};

4. 配置Expo网络权限 #

由于你使用HTTP域名，需在app.json中允许明文请求：

iOS配置 #

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true
        }
      }
    }
  }
}

Android配置 #

{
  "expo": {
    "android": {
      "networkSecurityConfig": {
        "domainConfigs": [
          {
            "domain": "www.kushal.com",
            "cleartextTrafficPermitted": true
          }
        ]
      }
    }
  }
}

5. 验证FormData实际内容 #

直接console.log(formData)无法查看内部数据，需遍历输出：

// 替换原console.log(formData)
for (let [key, value] of formData.entries()) {
  console.log(`${key}:`, value);
}

确认WorkforceId、fileType等参数名、值与服务器接口要求完全一致（注意大小写）。

6. 检查服务器端可用性 #

• 用Postman模拟相同FormData请求，验证http://www.kushal.com/kk.api/workforce/fileupload接口是否可正常访问
• 确认服务器支持multipart/form-data类型请求
• 验证token有效性，排查是否过期或权限不足

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