Firebase Storage文件上传生成9b损坏文件、进度显示NaN问题排查

问题根因 #

你代码里调用put方法时参数传递错误，是导致问题的核心原因：
Firebase Storage的Reference.put()方法标准传参规则为：
put(待上传内容, 元数据对象[可选], 上传配置[可选])
你当前代码的调用写法为：

.put(file, "", {
  contentType: file.type ? file.type : "image/jpeg",
})

第二个参数错误传入了空字符串，触发了Firebase的参数解析异常，框架将空字符串识别为待上传的内容，原本的file参数被忽略，所以最终上传的文件只有空字符串对应的9字节大小，文件自然损坏无法打开。
而上传进度为NaN的原因是：空字符串对应的总字节数为0，计算进度时bytesTransferred / totalBytes出现了除0运算，结果为NaN。

修复方案 #

调整put方法的参数，把contentType配置放到第二个元数据参数位即可：

uploadTask = storageRef
  .child(uid)
  .child("uploads")
  .child("note-images")
  .child(fileName)
  .put(file, {
    contentType: file.type ? file.type : "image/jpeg",
  });

另外建议你补全当前空的error回调逻辑，添加错误打印方便后续排查上传异常：

// 原error回调
(error) => {
  console.error("上传出错：", error)
},

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