使用uploadBytes向Firebase传图片时遇pipe is not a function错误

问题核心 #

你遇到的报错本质是传入 uploadBytes 的对象并非有效 Blob/ArrayBuffer/Uint8Array，或是数据转换过程中生成了不符合要求的类型，导致 Firebase 内部处理流时出错。以下是针对性的修复步骤和代码示例：

1. 修正服务器端 DataURL 转 Blob 逻辑 #

首先确保从客户端传来的 DataURL 被正确转换为符合标准的 Blob 对象，这是解决报错的关键：

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

// 工具函数：将 DataURL 转为标准 Blob
function dataURLToBlob(dataURL: string): Blob {
  // 拆分 DataURL 的 MIME 类型和数据部分
  const [mimeSection, dataSection] = dataURL.split(',');
  const mimeType = mimeSection.match(/:(.*?);/)?.[1] || 'image/png';
  
  // Base64 解码为二进制数据
  const byteString = atob(dataSection);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  
  // 填充 Uint8Array
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  
  return new Blob([uint8Array], { type: mimeType });
}

// 上传图片至 Firebase Storage 的核心函数
export async function updateProfilePic(dataURL: string): Promise<string> {
  const storage = getStorage();
  // 生成唯一存储路径（避免文件名冲突）
  const storageRef = ref(storage, `profile-pics/${Date.now()}_${Math.random().toString(36).slice(2)}.png`);

  try {
    const validBlob = dataURLToBlob(dataURL);
    await uploadBytes(storageRef, validBlob);
    // 获取可访问的下载 URL
    return await getDownloadURL(storageRef);
  } catch (error) {
    console.error('图片上传失败:', error);
    throw error;
  }
}

2. 适配 Express 服务器的请求处理 #

确保 Express 能正确接收客户端发送的 DataURL 字符串，注意设置合适的请求大小限制（图片可能较大）：

import express from 'express';
const app = express();

// 解析 JSON 请求，设置 10MB 大小限制（可根据需求调整）
app.use(express.json({ limit: '10mb' }));

app.post('/upload-profile-pic', async (req, res) => {
  try {
    const { dataURL } = req.body;
    if (!dataURL || !dataURL.startsWith('data:image/png')) {
      return res.status(400).json({ error: '无效的 PNG 图片数据' });
    }
    
    const downloadURL = await updateProfilePic(dataURL);
    res.json({ url: downloadURL });
  } catch (error) {
    res.status(500).json({ error: '图片上传服务异常' });
  }
});

3. 优化建议：避免使用 DataURL 传输 #

DataURL 会比原始二进制数据大 30% 左右，推荐客户端直接传输二进制数据，提升效率：

客户端优化代码（替代 FileReader 转 DataURL）

// 选择文件后直接上传二进制数据
async function handleFileSelect(file: File) {
  // 方式1：用 ArrayBuffer 传输
  const arrayBuffer = await file.arrayBuffer();
  const response = await fetch('/upload-profile-pic', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      arrayBuffer: Array.from(new Uint8Array(arrayBuffer)),
      mimeType: file.type
    })
  });

  // 方式2：用 FormData 传输（更直观）
  // const formData = new FormData();
  // formData.append('image', file);
  // const response = await fetch('/upload-profile-pic', {
  //   method: 'POST',
  //   body: formData
  // });

  const result = await response.json();
  console.log('图片访问 URL:', result.url);
}

对应服务器端 FormData 处理（需安装 multer）

import multer from 'multer';
// 用内存存储临时文件，避免写入磁盘
const upload = multer({ storage: multer.memoryStorage() });

app.post('/upload-profile-pic', upload.single('image'), async (req, res) => {
  try {
    if (!req.file) return res.status(400).json({ error: '未上传图片' });
    
    const storage = getStorage();
    const storageRef = ref(storage, `profile-pics/${Date.now()}_${req.file.originalname}`);
    // 直接用文件缓冲区生成 Blob
    const blob = new Blob([req.file.buffer], { type: req.file.mimetype });
    
    await uploadBytes(storageRef, blob);
    const downloadURL = await getDownloadURL(storageRef);
    res.json({ url: downloadURL });
  } catch (error) {
    res.status(500).json({ error: '上传失败' });
  }
});

关键注意点 #

• 禁止向 uploadBytes 传入 Node.js 的 Readable 流，Firebase Storage 仅支持 Blob/ArrayBuffer/Uint8Array 类型
• 确保 Express 中间件与客户端请求格式匹配：JSON 请求用 express.json()，FormData 请求用 multer 解析
• 生成存储路径时加入随机字符串/时间戳，避免文件名冲突

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