React-Native上传二进制图片至GCP成功但无法查看求助

以下是针对该问题的排查方向和解决方案：

1. 检查文件读取与二进制数据处理 #

React-Native中读取本地文件时，若未正确获取原始二进制数据，会导致上传的文件损坏。建议使用react-native-fs或expo-file-system读取文件的原始二进制：

示例（使用expo-file-system）： #

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

const readFileBinary = async (fileUri) => {
  // 以base64读取后转成Blob
  const base64Data = await FileSystem.readAsStringAsync(fileUri, {
    encoding: FileSystem.EncodingType.Base64,
  });
  const blob = await new Blob([base64ToUint8Array(base64Data)], { type: 'image/jpeg' });
  return blob;
};

// 辅助函数：base64转Uint8Array
const base64ToUint8Array = (base64) => {
  const raw = atob(base64);
  const uint8Array = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; i++) {
    uint8Array[i] = raw.charCodeAt(i);
  }
  return uint8Array;
};

2. 修正FormData的构造方式 #

RN的FormData实现与浏览器存在差异，需注意以下两点：

• 明确指定文件名和Content-Type
• 避免手动设置Content-Type请求头（由RN自动生成带边界符的头）

正确的FormData构造示例： #

const uploadToGCP = async (fileUri, fileName) => {
  const blob = await readFileBinary(fileUri);
  const formData = new FormData();
  
  // RN中FormData的append需指定文件名和类型
  formData.append('file', blob, {
    name: fileName,
    type: 'image/jpeg', // 匹配实际文件类型
  });

  const response = await fetch(YOUR_GCP_UPLOAD_URL, {
    method: 'POST',
    body: formData,
    // 不要手动设置Content-Type，RN会自动添加multipart/form-data及边界符
  });

  return response.json();
};

3. 验证GCP签名与请求参数一致性 #

若使用预签名URL上传，确保RN请求的参数与生成签名时的参数完全一致：

• 生成预签名URL时指定的Content-Type必须和上传时的一致
• 若签名包含Content-Length校验，需确保上传的文件大小与签名时的计算值匹配

4. 调试上传的文件内容 #

可以通过以下方式验证上传的文件是否损坏：

• 在RN中读取文件后，将base64数据复制到在线base64转图片工具查看是否能正常显示
• 对比Postman和RN请求的multipart/form-data内容（通过抓包工具如Charles查看），检查边界符、文件数据部分是否一致

5. 检查GCP存储桶的文件属性 #

• 确保上传后的文件Content-Type被正确设置（GCP存储桶会根据上传时的请求头自动设置，缺失会导致浏览器无法识别）
• 验证文件的存储权限是否符合访问策略（如公开可读）

内容的提问来源于stack exchange，提问作者Đình Đạt