在React Native中使用react-native-image-crop-picker集成图片上传API的问题

问题分析 #

react-native-image-crop-picker在不同平台返回的字段存在差异：iOS端返回的图片路径字段为path，Android端部分版本也可能仅返回path而非uri。你的代码还存在两个关键问题：

• FormData的uri格式未适配平台要求
• axios请求体错误地将FormData包裹在对象中，导致后端无法正确解析

解决方案 #

1. 适配平台的uri转换 #

根据平台对文件路径的规范，将返回的path转换为符合要求的uri：

• iOS：需要给path添加file://前缀，否则系统无法识别为合法文件路径
• Android：直接使用返回的path即可作为uri

2. 修正axios请求参数 #

axios.post的第二个参数应直接传入FormData实例，无需将其包裹在{file: data}对象中——multipart/form-data格式的请求体本身就是FormData，额外包裹会导致参数结构错误。

修正后的完整代码 #

import { Platform } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import axios from 'axios';

const uploadFile = async () => {
  try {
    const option = await ImagePicker.openPicker({
      width: 300,
      height: 300,
      cropping: true,
      mediaType: "photo",
      forceJpg: true,
    });

    console.log(option);
    setImage(option.path);

    // 适配不同平台的uri格式
    const fileUri = Platform.OS === 'ios' ? `file://${option.path}` : option.path;

    const data = new FormData();
    data.append("file", {
      name: option.filename || `image_${Date.now()}.jpg`, // 兜底文件名，避免字段为空
      type: option.mime || 'image/jpeg', // 兜底MIME类型
      uri: fileUri,
    });

    const response = await axios.post(
      "Api_URL/provider/UploadFile", // 注意移除URL中的空格
      data, // 直接传入FormData作为请求体
      {
        headers: {
          Authorization: authToken,
          "Content-Type": "multipart/form-data",
          Accept: "application/json",
        },
      }
    );

    console.log('上传成功', response.data);
  } catch (error) {
    console.error('上传失败', error);
  }
};

额外注意事项 #

• 确保react-native-image-crop-picker为最新版本，旧版本可能存在字段返回不一致的问题
• 检查项目权限配置：Android需在AndroidManifest.xml中添加相册访问权限，iOS需在Info.plist中配置NSPhotoLibraryUsageDescription
• 若后端仍无法接收文件，可打印FormData内容或开启axios请求日志，确认参数结构是否符合后端要求

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