Expo Image Picker结合XMLHttpRequest在React Native中异常求助

Web端上传HTML片段问题 #

你当前的错误核心是：Web端Expo ImagePicker返回的是base64字符串，但你用XMLHttpRequest的GET请求去“获取”这个字符串，相当于把base64当成了HTTP URL，浏览器解析无效地址后返回了JS未启用的提示HTML。

正确做法是直接将base64转换为Blob，不需要发起XHR请求：

// base64转Blob工具函数
const base64ToBlob = (base64Str, contentType = '') => {
  const raw = atob(base64Str.split(',')[1]);
  const uInt8Array = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; i++) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
};

修改上传函数，区分Web和移动端的输入类型：

const uploadPhoto = async (photo) => {
  if (!photo) return null;

  let blob;
  // 处理Web端的base64数据
  if (photo.base64) {
    blob = base64ToBlob(photo.base64, photo.type);
  } 
  // 处理移动端的uri数据
  else if (photo.uri) {
    blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = () => resolve(xhr.response);
      xhr.onerror = (e) => {
        console.error(e);
        reject(new TypeError("Network request failed"));
      };
      xhr.responseType = "blob";
      xhr.open("GET", photo.uri, true);
      xhr.send(null);
    });
  } else {
    console.error("无效的图片数据格式");
    return null;
  }

  try {
    const fileRef = ref(getStorage(), uuidv4());
    const uploadResult = await uploadBytes(fileRef, blob);
    return uploadResult;
  } catch (err) {
    alert(err.message);
    return null;
  }
};

iOS模拟器JSON格式错误问题 #

这个错误是因为你误将Web端的base64逻辑用到了iOS端——iOS返回的是uri，但如果代码错误地把base64传入XHR，XHR会把它当作无效URL请求，返回的错误响应被序列化成了JSON格式（看起来像base64数据，实际是错误信息）。

按照上面的代码区分平台输入后，iOS端只会处理uri，这个问题就会消失。

关于Expo ImagePicker平台差异的疑问 #

Web端返回base64、移动端返回uri是Expo ImagePicker的设计特性：Web浏览器受同源策略和文件访问限制，无法直接获取本地文件路径，只能返回base64；移动端系统允许直接访问本地文件，所以返回uri。

官方指南未提及可能是因为示例仅针对单端场景，或者默认开发者会查阅平台特定的API文档。这个差异必须针对性处理，否则会直接导致上传逻辑失败。

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