如何用JavaScript正确上传图片到Firebase Storage？上传异常排查

问题根源 #

你错误地使用了window.URL.createObjectURL()的返回值作为上传内容——这个方法返回的是指向文件的URL字符串，而非实际的File/Blob对象。上传这个字符串自然只会生成9B左右的文件，且因为没有文件流数据，进度计算失效导致NaN%。

修复后的代码 #

直接使用picker.files[0]这个原生File对象进行上传，同时添加获取下载链接的逻辑：

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const storage = getStorage();

const picker = document.getElementById('img');

picker.onchange = function() {
  // 直接获取选中的File对象
  const file = picker.files[0];
  if (!file) return; // 空值判断，避免无文件时出错
  const filename = file.name;
  const storageRef = ref(storage, 'icons/' + filename);

  // 上传实际的File对象
  uploadBytes(storageRef, file)
    .then((snapshot) => {
      console.log('文件上传完成！');
      // 获取下载链接
      return getDownloadURL(snapshot.ref);
    })
    .then((downloadURL) => {
      console.log('文件下载链接：', downloadURL);
      // 这里可以把downloadURL赋值给页面元素或者存储起来
    })
    .catch((error) => {
      console.error('上传出错：', error);
    });
}

额外优化建议 #

• 添加文件类型校验，确保只上传图片：

  if (!file.type.startsWith('image/')) {
    alert('请选择图片文件！');
    return;
  }
  

• 添加上传进度监听（可选）：

  uploadBytes(storageRef, file, {
    onProgress: (snapshot) => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(`上传进度：${progress.toFixed(2)}%`);
    }
  })
  

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