React Native Expo上传图片至后端大小为0问题求助

问题分析 #

你遇到的核心问题有两个：

1. React Native（Expo）环境下，Blob/File对象的序列化逻辑和Web环境不同，直接构造的File无法被FormData正确处理。
2. 手动设置Content-Type: multipart/form-data会覆盖axios自动生成的带boundary的请求头，导致后端无法正确解析表单数据。

修复方案 #

直接使用React Native兼容的FormData文件格式，同时移除手动设置的Content-Type头：

import * as FileSystem from 'expo-file-system';
import axios from 'axios';

export const uploadVerificationPhoto = async (photoUri: string) => {
  try {
    // 获取文件的MIME类型，避免手动指定错误类型
    const fileInfo = await FileSystem.getInfoAsync(photoUri);
    const mimeType = fileInfo.mimeType || 'image/jpeg';

    const formData = new FormData();
    formData.append("driverID", "63cf8420cd6d7a41da6dad91");
    // React Native专属的FormData文件格式：传入包含uri、name、type的对象
    formData.append("driverImage", {
      uri: photoUri,
      name: 'photo.jpeg',
      type: mimeType,
    });

    const response = await axios.post(
      "http://localhost:10001/api/image/profile-photo",
      formData
      // 无需手动设置Content-Type，axios会自动生成带boundary的正确头
    );
    return response.data;
  } catch (error) {
    console.error("Error sending photos:", error);
    throw error;
  }
};

关键说明 #

• 不要手动设置multipart/form-data头：axios会自动根据FormData生成包含boundary的请求头，手动设置会丢失这个分隔符，后端无法拆分表单中的字段和文件。
• RN FormData的特殊格式：不需要创建Web标准的File对象，直接传入带有uri（本地文件路径）、name（文件名）、type（MIME类型）的对象即可，axios会自动处理文件流的上传。
• 获取正确的MIME类型：使用expo-file-system的getInfoAsync可以准确获取文件类型，避免因类型不匹配导致的后端解析问题。

关于base64报错的补充 #

之前尝试base64方式时的uri cannot be read错误，通常是因为文件路径格式问题（比如Expo相机返回的file://路径需要确保FileSystem有读取权限），但使用上述直接上传文件流的方案可以绕过这个问题，且效率更高。

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