Firebase Storage：byteLength含义、MIME类型设置及上传问题排查

关于byteLength的解释 #

byteLength是JavaScript中二进制数据对象（如ArrayBuffer、Blob、Node.js的Buffer）的属性，用于表示数据的字节总大小。你遇到的TypeError是因为上传时传入的参数不是有效的二进制数据/可处理的字符串，程序尝试读取该参数的byteLength属性时，发现参数本身是undefined，因此抛出错误。

你的代码问题分析及修复 #

1. 上传内容错误：传入路径字符串而非文件内容 #

你调用uploadString(storageRef, './bootchkas.jpg')时，实际上传的是字符串'./bootchkas.jpg'本身（长度15字节），而非该路径对应的图片文件内容，这就是为什么存储中的文件只有15B。

2. Cloud Functions无法直接访问本地文件路径 #

云端运行的函数无法读取你的本地文件系统，./bootchkas.jpg在函数运行环境中不存在。你需要通过以下方式获取文件数据：

• 从Firestore更新的文档中读取编码后的文件数据（如base64）
• 通过HTTP请求拉取文件
• 测试时将文件内容嵌入代码，或确保文件被包含在函数部署包中

3. 异步处理不完整导致模拟器无文件 #

你的代码中调用uploadString后未用await等待操作完成，函数会提前返回，导致上传流程被终止，模拟器来不及生成文件。

4. 如何指定MIME类型 #

uploadString支持通过第四个参数的配置对象指定MIME类型，示例：

uploadString(storageRef, fileData, 'raw', { contentType: 'image/jpeg' })

或使用uploadBytes时：

uploadBytes(storageRef, fileBuffer, { contentType: 'image/jpeg' })

修正后的代码示例 #

import { initializeApp } from "firebase/app";
import * as functions from "firebase-functions";
import { getStorage, ref, uploadString, connectStorageEmulator } from "firebase/storage";
import * as fs from 'fs';
import * as path from 'path';

const firebaseConfig = {
    apiKey: "...",
    authDomain: "my-awesome-app.firebaseapp.com",
    databaseURL: "https://my-awesome-app.firebaseio.com",
    projectId: "my-awesome-app",
    storageBucket: "my-awesome-app.appspot.com",
    messagingSenderId: "...",
    appId: "..."
};

const app = initializeApp(firebaseConfig);

export const ByteMe = functions.firestore.document('ByteMe/{userID}').onUpdate(async (change, context) => {
    const storage = getStorage();
    // 无需在ref中写完整gs://路径，getStorage已关联对应bucket
    const storageRef = ref(storage, 'Pictures/bootchkas.jpg');
    connectStorageEmulator(storage, "localhost", 9199);

    try {
        // 本地测试时读取文件（部署时需确保文件在部署包中，或改用其他数据来源）
        const filePath = path.join(__dirname, 'bootchkas.jpg');
        const fileBuffer = fs.readFileSync(filePath);
        
        // 用base64格式上传并指定MIME类型
        await uploadString(storageRef, fileBuffer.toString('base64'), 'base64', { 
            contentType: 'image/jpeg' 
        });
        
        // 或使用uploadBytes上传Buffer
        // await uploadBytes(storageRef, fileBuffer, { contentType: 'image/jpeg' });
        
        console.log('文件上传成功');
    } catch (error) {
        console.error('上传失败:', error);
        throw error; // 抛出错误让Functions记录执行失败
    }
});

模拟器使用注意事项 #

确保本地Storage模拟器已通过firebase emulators:start --only storage启动，且函数中所有异步操作都用await等待完成，避免函数提前终止导致上传中断。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe