Firebase图片上传异常求助：上传后预览加载失败且文件大小不符

看起来你踩了一个很容易犯的小坑——直接把本地文件路径字符串传给了Firebase Storage的put()方法，这就是为什么上传后的文件只有9字节、预览加载失败的原因！

问题根源 #

Firebase Storage的put()方法不接受字符串格式的文件路径，它只认Blob、File或者Uint8Array这类二进制数据。你传入的"../../assets/icons/house.jpg"被当成了纯文本内容上传，文件大小刚好是这个字符串的长度（9字节），自然无法识别为图片。

解决方案：传入正确的二进制文件数据 #

根据你的项目路径来看，这应该是前端项目（比如Vue/React），我们可以通过fetch把图片资源转换成Blob对象，再传给put()方法。下面是修改后的代码：

// 先引入你的本地图片资源（根据项目框架调整引入方式）
import houseImage from '../../assets/icons/house.jpg';

var storageRef = storage.ref();
var propertyRef = storageRef.child(mainImageUrl);
console.log("adding property image")

const myPromise = new Promise((resolve, reject) =>{
  const metadata = {
    contentType: 'image/jpeg',
    cacheControl: 'public,max-age=300',
  };

  // 通过fetch获取图片的Blob二进制数据
  fetch(houseImage)
    .then(response => {
      if (!response.ok) throw new Error('Failed to fetch image');
      return response.blob();
    })
    .then(imageBlob => {
      // 传入Blob对象进行上传
      return propertyRef.put(imageBlob, metadata);
    })
    .then((snapshot)=>{
      console.log('Uploaded a file', snapshot);
      return snapshot.ref.getDownloadURL();
    })
    .then((downloadURL)=>{
      console.log("url: ", downloadURL);
      resolve(downloadURL);
    })
    .catch((error)=>{
      console.error('Upload error:', error);
      reject(error);
    });
});

额外说明 #

• 如果是处理用户通过文件选择器上传的图片，可以直接使用input元素返回的File对象（比如document.querySelector('input[type="file"]').files[0]），它本身就是Blob的子类，能直接传给put()。
• 上传完成后，去Firebase Storage控制台查看文件大小，如果显示约50KB，就说明上传成功了，此时图片预览应该能正常加载。

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