React Native使用Expo Camera上传图片至Laravel后端时文件为空问题

问题分析 #

在Expo环境下使用expo-camera拍摄图片后上传至Laravel后端，iPhone端出现图片字段为空的情况，核心原因：

• 直接通过fetch本地URI生成Blob时，iOS存在权限或读取异常，导致Blob内容为空
• Expo采用Web标准的FormData，不支持React Native原生环境中直接传入{uri, name, type}对象的写法

解决方案 #

通过expo-file-system工具读取图片内容，确保文件数据完整，再构造合法的File对象进行上传：

1. 安装依赖

npx expo install expo-file-system

2. 修改上传函数

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

const uploadImage = async (imageUri: string, protocolId: number, name: string) => {
  // 获取图片MIME类型
  const fileInfo = await FileSystem.getInfoAsync(imageUri, { mime: true });
  const mimeType = fileInfo.mimeType || 'image/jpeg';
  
  // 读取图片为base64格式
  const base64Content = await FileSystem.readAsStringAsync(imageUri, { encoding: 'base64' });
  
  // 将base64转换为Blob
  const byteArray = Uint8Array.from(atob(base64Content), char => char.charCodeAt(0));
  const blob = new Blob([byteArray], { type: mimeType });
  
  // 构造File对象（自定义文件名避免URI解析问题）
  const fileExt = mimeType.split('/')[1];
  const fileName = `upload_${Date.now()}.${fileExt}`;
  const file = new File([blob], fileName, { type: mimeType });

  const formData = new FormData();
  formData.append("image", file);
  formData.append("protocolId", protocolId.toString());
  formData.append("name", name);

  try {
    const response = await fetch(POST_UPLOAD_PROTOCOL_PHOTO, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${user?.token}`,
        // 无需手动设置Content-Type，FormData会自动生成正确的multipart格式及boundary
      },
      body: formData,
    });
    
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
    throw error;
  }
};

关键注意事项 #

• 不要手动设置Content-Type: multipart/form-data，否则会丢失FormData自动生成的boundary标识，导致后端无法解析文件
• 自定义文件名而非直接使用原始URI，避免iOS文件路径中的特殊字符引发解析问题
• 确保Laravel后端配置了正确的文件上传大小限制，且接收字段名与前端formData.append的"image"一致

内容的提问来源于stack exchange，提问作者Kilian K.