上传图片至Firebase Storage生成9B损坏文件无法打开的问题咨询

核心根因：你传入uploadBytesResumable的第二个参数file不是合法的File/Blob对象，9B是字符串[object File]的字节长度，说明你实际传的是对象转字符串的结果，不是真实的文件二进制内容。

排查步骤 #

• 上传前打印file变量验证：添加console.log('文件对象：', file, '文件大小：', file?.size)，确认输出的是带正确size、type属性的File对象，而不是input DOM元素、文件路径字符串或其他类型值。
• 检查文件获取逻辑：如果是用表单input上传，取值必须是const file = inputElement.files[0]，不能直接取input元素本身。
• 不要硬写contentType：你当前写死了contentType: 'image/png'，如果上传的是其他格式图片会出现识别异常，建议直接取文件自带的type，或者不传metadata让Firebase自动识别。
• 确认没有对file做多余的序列化操作：不要对file执行JSON.stringify、toString等转换，直接传原始File对象即可。

修正后代码参考 #

// 先确认你已经正确拿到file对象，比如从input的files数组取值
const file = document.querySelector('input[type="file"]').files[0]
if (!file || !(file instanceof File)) {
  console.error('无效的文件对象')
  return
}

const metadata = {
  contentType: file.type
};

const storageRef = ref(storage, 'products/' + file.name);
const uploadTask = uploadBytesResumable(storageRef, file, metadata);

uploadTask.on('state_changed',
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  },
  (error) => {
    switch (error.code) {
      case 'storage/unauthorized':
        break;
      case 'storage/canceled':
        break;
      case 'storage/unknown':
        break;
    }
  },
  () => {
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);

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