React Native中Axios上传图片遇Network Error问题求助

我之前也碰到过类似的上传问题，给你几个实用的排查和解决方向：

1. 移除手动设置的Content-Type，让Axios自动处理 #

你现在手动指定了multipart/form-data的boundary，但Axios在接收FormData作为data参数时，会自动生成正确的Content-Type（包含匹配的boundary），手动设置反而可能导致boundary不匹配，引发请求解析错误。

修改你的Axios调用代码：

const addProduct = async product => {
  try {
    const prod = await axios({
      method: 'post',
      url: baseURL + 'addProduct',
      data: product,
      headers: {
        // 删掉手动设置的content-type，交给Axios自动处理
        Accept: 'application/json',
      },
    });
    return prod;
  } catch (err) {
    throw err;
  }
};

2. 修正React Native中图片URI的处理 #

在React Native的Android环境中，file://开头的URI有时候会导致FormData处理异常，建议去掉file://前缀：

// 先导入Platform模块
import { Platform } from 'react-native';

// 构造FormData时处理uri
const imageUri = Platform.OS === 'android' 
  ? this.state.image.replace('file://', '') 
  : this.state.image;

bodyFormData.append('image', {
  name: imgName,
  type: 'image/jpeg',
  uri: imageUri,
});

3. 检查网络权限和平台配置 #

Android端： #

• 确保AndroidManifest.xml中添加了网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• 如果你的服务器是HTTP协议（非HTTPS），Android 9及以上默认禁止明文流量，需要在application标签中添加：

  android:usesCleartextTraffic="true"
  

iOS端： #

• 如果使用HTTP服务器，需要在Info.plist中添加ATS例外：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

（注意：上线时建议只针对特定域名开放，而非全局允许）

4. 检查服务器端的表单解析配置 #

确保你的服务器正确配置了multipart/form-data的解析中间件，比如：

• Express框架：使用multer中间件处理文件上传
• NestJS：配合@nestjs/platform-express和multer使用
• 其他框架也需要对应开启表单数据解析功能，如果服务器无法解析请求，也可能返回网络错误。

5. 修正代码中的语法错误 #

你的Axios调用代码末尾有多余的括号和逗号：}, });，应该改成});，虽然这可能不是直接导致Network Error的原因，但语法错误可能引发其他运行时问题，建议修正。

如果以上步骤都尝试后还是报错，可以通过这些方式进一步排查：

• 使用Charles或Wireshark抓包，查看实际发送的请求是否符合预期
• 尝试用fetch替代Axios发送请求，验证是否是Axios的配置问题
• 测试服务器接口是否能接收Postman等工具发送的multipart/form-data请求

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