为何上传Base64图片至Firebase Storage后显示application/octet类型？

我有一张Base64格式的图片，想要上传至Firebase Storage，但每次上传后文件的类型都会变成"application/octet"，这不符合我的预期，请问问题出在哪里？

以下是处理Firebase Storage上传的函数：

const handleFiles = (files) => {
    if(files == null) return;

    const imageRef = ref(storage, `images/${v4()}`);
    //Upload image to firebase
    uploadBytes(imageRef, files.base64.slice(23)).then(() => {
      alert("Image Uploaded")
    })
}

原因 #

你直接上传了Base64截取后的纯字符串内容，Firebase无法识别这部分内容的文件类型，默认会将其标记为application/octet-stream（通用二进制流类型）。同时你没有在上传时指定文件的元数据（比如Content-Type），导致存储系统无法正确识别图片的MIME类型。

解决方法 #

可以通过两种方式解决：

方法一：将Base64转换为Blob对象上传 #

Blob对象会携带明确的类型信息，Firebase能直接识别：

const handleFiles = (files) => {
    if(files == null) return;

    // 拆分Base64字符串，提取MIME类型和数据部分
    const [typePart, dataPart] = files.base64.split(',');
    const mimeType = typePart.match(/:(.*?);/)[1];

    // 将Base64数据转为Blob
    const byteString = atob(dataPart);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
        uint8Array[i] = byteString.charCodeAt(i);
    }
    const imageBlob = new Blob([uint8Array], { type: mimeType });

    const imageRef = ref(storage, `images/${v4()}`);
    uploadBytes(imageRef, imageBlob).then(() => {
        alert("Image Uploaded")
    })
}

方法二：上传字符串时指定元数据 #

如果不想转换为Blob，可以在上传时通过第三个参数明确设置Content-Type：

const handleFiles = (files) => {
    if(files == null) return;

    // 从Base64字符串中提取MIME类型
    const mimeType = files.base64.match(/data:(.*?);base64/)[1];
    const imageRef = ref(storage, `images/${v4()}`);
    
    // 上传时传入元数据指定文件类型
    uploadBytes(imageRef, files.base64.slice(23), {
        contentType: mimeType
    }).then(() => {
        alert("Image Uploaded")
    })
}

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