Firebase Storage上传带正确扩展名的图片后为何文件类型为application/octet-stream？

核心原因 #

调用put() 方法上传文件时，Firebase Storage SDK不会自动解析上传的本地文件扩展名、也不会自动读取File对象自带的MIME类型信息——哪怕你上传的文件本身带有正确的图片扩展名，只要上传参数中没有主动指定contentType元数据，就会触发默认兜底逻辑，将文件类型统一标注为通用二进制流application/octet-stream。
现有示例代码还有两个会导致功能异常的问题：

• 没有从input的change事件回调中正确绑定选中的File对象，代码内引用的img、image变量没有和实际选中的上传文件关联
• 上传调用时没有传入指定元数据的配置项

修正后的完整实现 #

<input
  type="file"
  id="img"
  name="filename"
  accept="image/*"
  onChange={(e) => handleChange(e)}
/>

const handleChange = async (e) => {
  // 从事件对象中获取用户选中的文件
  const selectedFile = e.target.files[0];
  // 无选中文件时直接中断逻辑
  if (!selectedFile) return;

  // 生成对应存储路径的引用
  const imgRef = firebase.storage().ref('images/' + selectedFile.name);
  // 上传时附带元数据，明确指定正确的文件类型
  await imgRef.put(selectedFile, {
    contentType: selectedFile.type
  });
};

注意事项 #

• 直接使用File对象原生的type属性作为contentType的值即可，无需手动根据文件后缀匹配MIME类型，可降低手动规则的出错概率
• 上传完成后可在Firebase Storage控制台的文件详情中，确认contentType字段已正确设置为对应图片格式，避免后续出现图片无法直接预览、下载时被浏览器识别为可执行文件的问题

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