使用Expo Image Picker和Axios上传图片时遇网络错误求助

以下是针对你代码问题和报错的具体排查与修复步骤：

一、修正权限不匹配问题 #

你的代码中请求的是相册权限（requestLibraryPermision），但实际调用的是相机功能（launchCameraAsync），权限类型不匹配会导致相机无法正常启用，甚至触发后续网络请求异常：

1. 替换权限请求为相机权限：使用 ImagePicker.requestCameraPermissionsAsync() 替代 requestLibraryPermision
2. 检查权限返回状态，确保权限已授予

二、修复 FormData 构造错误 #

Expo ImagePicker 返回的 asset 对象不能直接追加到 FormData，需要手动构造符合文件上传规范的对象：

const asset = result.assets[0];
const formData = new FormData();
// 构造标准文件对象
formData.append("image", {
  uri: asset.uri,
  type: asset.mimeType || "image/jpeg",
  name: asset.fileName || `upload-${Date.now()}.jpg`
});

直接传入原始 asset 对象会导致 FormData 无法被服务器正确解析，进而引发请求失败。

三、移除手动设置的 Content-Type #

Axios 会自动根据 FormData 生成包含 boundary 参数的 multipart/form-data 头，手动设置会丢失关键的 boundary 信息，导致服务器无法解析请求体：

// 移除以下手动配置
headers: {
  "content-type": "multipart/form-data",
}

四、排查基础网络问题 #

1. 服务器地址有效性：如果是本地服务器，确保 Expo 客户端与服务器在同一局域网，使用电脑 IP 而非 localhost（模拟器/真机无法直接访问 localhost）
2. CORS 配置：服务器需开启跨域资源共享（CORS），允许前端域名的请求
3. 证书与协议：如果使用 HTTPS，确保服务器证书有效；开发环境可暂时关闭 Axios 的 SSL 验证（仅用于调试）
4. 端口与防火墙：确认服务器端口已开放，本地防火墙未拦截请求

五、添加详细错误日志 #

在 catch 块中打印更完整的错误信息，帮助定位问题：

.catch((error) => {
  console.log("CATCH ERROR: ", error);
  console.log("Error message: ", error.message);
  if (error.response) {
    console.log("Server status: ", error.response.status);
    console.log("Server response: ", error.response.data);
  }
});

修复后的完整代码示例 #

const selectImage = async () => {
  try {
    // 检查相机权限
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== "granted") {
      console.log("相机权限未授予");
      return;
    }

    // 启动相机并获取图片
    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 0.8
    });

    if (!result.canceled) {
      const asset = result.assets[0];
      // 更新本地状态
      const newInformation = { ...information };
      newInformation.data.image = asset.uri;
      setInformation(newInformation);

      // 构造 FormData
      const formData = new FormData();
      formData.append("image", {
        uri: asset.uri,
        type: asset.mimeType || "image/jpeg",
        name: asset.fileName || `upload-${Date.now()}.jpg`
      });

      const url = `${serverData.url}/profile/update-image`;
      // 发送上传请求
      const response = await axios.post(url, formData);
      console.log("response: ", response.data);
    }
  } catch (error) {
    console.log("Error: ", error);
    console.log("Error details: ", error.message);
    if (error.response) {
      console.log("Server status: ", error.response.status);
      console.log("Server response: ", error.response.data);
    }
  }
};

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