Expo集成ImagePicker上传图片至Firebase Storage报400错误

返回Invalid HTTP method/URL pair400错误由两处代码错误共同导致：

1. 存储引用路径非法：创建存储引用时重复拼接了两次文件名，还错误使用了相对路径前缀./。Firebase Storage仅支持从存储桶根目录开始的绝对路径，不识别相对路径格式，重复拼接文件名还会生成无后缀的非法目标地址。
   错误代码示例：假设截取到的文件名为abc123.jpg，该行代码最终生成的路径为./images/abc123.jpgabc123.jpg，服务端无法识别该路径。

   const storageRef = ref(storage, `./images/${filename}` + filename);
   

2. Expo环境下Blob生成方式不兼容：在React Native/Expo运行环境中，直接调用fetch(本地资源URI).blob()获取的Blob对象缺失必要的内部元数据，Firebase SDK读取这类不完整的Blob时，会生成错误的上传请求端点与请求方法，最终触发参数校验失败。

• 修正存储引用路径，移除相对路径前缀./，删除重复的文件名拼接逻辑，使用合法的绝对路径指定上传目标位置。
• 替换原生fetch转Blob的逻辑，使用Expo官方兼容的方案读取本地图片文件，生成符合Firebase SDK要求的合法Blob对象。
• 补全上传结束后的Blob资源释放逻辑，避免连续上传导致的内存泄漏问题。

首先安装必要依赖（未安装时执行）：

expo install expo-file-system

上传逻辑修正如下：

import * as FileSystem from 'expo-file-system';
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';

const uploadImage = async () => {
  if (!imagen) return;
  const metadata = {
    contentType: 'image/jpeg',
  };

  try {
    const filename = imagen.uri.substring(imagen.uri.lastIndexOf('/') + 1);
    // 读取本地图片为base64格式，规避fetch读本地文件的兼容问题
    const base64Data = await FileSystem.readAsStringAsync(imagen.uri, {
      encoding: FileSystem.EncodingType.Base64,
    });
    // 将base64转换为合法Blob对象
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = () => resolve(xhr.response);
      xhr.onerror = () => reject(new TypeError('文件读取失败'));
      xhr.responseType = 'blob';
      xhr.open('GET', `data:image/jpeg;base64,${base64Data}`, true);
      xhr.send(null);
    });

    // 生成合法的存储引用路径
    const storageRef = ref(storage, `images/${filename}`);
    const uploadTask = uploadBytesResumable(storageRef, blob, metadata);

    uploadTask.on(
      'state_changed',
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        setProgreso(progress);
        switch (snapshot.state) {
          case 'paused':
            console.log('上传已暂停');
            break;
          case 'running':
            console.log('上传进行中');
            break;
        }
      },
      (error) => {
        blob.close();
        switch (error.code) {
          case 'storage/unauthorized':
            console.log('无对应路径上传权限');
            break;
          case 'storage/canceled':
            console.log('上传已被取消');
            break;
          case 'storage/unknown':
            console.log('服务端未知错误', error.serverResponse);
            break;
        }
      },
      () => {
        blob.close();
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          console.log('文件可访问地址：', downloadURL);
        });
      }
    );
  } catch (err) {
    console.log('上传流程异常：', err);
  }
};

• 如果你使用的是v13及以上版本的expo-image-picker，返回结果结构有变更：cancelled字段更名为canceled，图片资源信息存储在res.assets数组中，正确的图片URI路径为res.assets[0].uri，原有选图逻辑需要对应适配，否则会拿到空URI导致上传失败。
• 测试阶段请确认Firebase Storage安全规则已开放images路径的写入权限，避免权限拦截导致上传失败。
• 若你上传的图片包含png格式，需要同步修改contentType为image/png，或动态根据文件后缀匹配对应MIME类型，避免服务端类型校验失败。

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