React Native上传图片至Firebase Storage时Content Type异常问题

问题 #

React Native项目开发头像上传页面，图库选图功能正常，但上传至Firebase Storage的图片Content Type始终为application/octet-stream，导致访问URL时触发下载而非直接展示图片。尝试设置contentType: 'image/jpeg'但未生效。

当前上传逻辑代码片段：

const uploadImage = (userId: string): void => {
  const imageRef = ref(
    storage,
    `ProfilePictures/${profilePicture.fileName}`,
  );
  const metadata = {
    contentType: 'image/jpeg',
  };
  uploadBytes(imageRef, profilePicture, {customMetadata: metadata})
    .then(response => {
      getDownloadURL(imageRef)
        .then(url => {
          console.log('pushed to storage')
        })
        .catch(error => {
          console.error('Error getting download URL:', error);
        });
    })
    .catch(error => {
      console.error('Error uploading image:', error);
    });
};

选中的profilePicture对象结构：

{
  "assetId": "CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001",
  "base64": null,
  "duration": null,
  "exif": null,
  "fileName": "Dania-profile-picture.jpeg",
  "fileSize": 13727225,
  "height": 3024,
  "type": "image",
  "uri": "file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/AB8866C8-D53D-47DA-99F2-5CD700EF4EE1/data/Containers/Data/Application/BC734A7E-06AB-4D6E-A078-AAE568879878/Library/Caches/ExponentExperienceData/%2540anonymous%252FIOweYou-6d1646a9-9f6c-418d-9753-3ce4dce5140a/ImagePicker/37E40F96-AEAC-4002-99B2-7BA2CE5B3BE7.jpg",
  "width": 4032
}

Firebase Storage中文件的Content Type显示为application/octet-stream。

原因及解决方案 #

核心问题 #

1. 元数据传递错误：你将contentType放到了customMetadata参数中，但Firebase的uploadBytes方法里，contentType属于顶层元数据字段，不属于自定义元数据范畴。
2. 上传对象类型错误：uploadBytes的第二个参数需要是Blob、File或Uint8Array类型的原始文件数据，你直接传入了profilePicture对象，Firebase无法识别其媒体类型，默认使用application/octet-stream。

修复步骤 #

1. 安装并导入文件处理依赖

使用Expo的FileSystem读取本地图片文件，先安装依赖：

npx expo install expo-file-system

在组件中导入：

import * as FileSystem from 'expo-file-system';

2. 修改上传函数

调整uploadImage，读取图片为Blob并正确传递元数据：

const uploadImage = async (userId: string): Promise<void> => {
  if (!profilePicture) return;

  // 将本地URI转换为Blob
  const response = await fetch(profilePicture.uri);
  const blob = await response.blob();

  const imageRef = ref(storage, `ProfilePictures/${profilePicture.fileName}`);
  // 直接传递顶层metadata，而非放入customMetadata
  const metadata = {
    contentType: 'image/jpeg',
  };

  try {
    await uploadBytes(imageRef, blob, metadata);
    const url = await getDownloadURL(imageRef);
    console.log('上传成功，下载URL:', url);
    // 可在此调用createUserProfile等后续逻辑
  } catch (error) {
    console.error('上传失败:', error);
  }
};

3. 修正权限请求逻辑

原pickDirectImage中权限请求未等待完成就打开图库，可能导致权限异常，修改为：

const pickDirectImage = async () => {
  const galleryStatus = await ImagePicker.requestMediaLibraryPermissionsAsync();
  setHasPermission(galleryStatus.status === 'granted');
  
  if (galleryStatus.status !== 'granted') {
    Alert.alert('权限不足', '请允许应用访问图库以选择头像');
    return;
  }

  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [5, 5],
    quality: 1,
  });
  
  if (!result.canceled) {
    let selectedImage = result.assets[0];
    // 确保文件名带正确后缀
    selectedImage.fileName = `${profileUsername}-profile-picture.jpeg`;
    setProfilePicture(selectedImage);
  }
};

验证 #

上传完成后，在Firebase Storage控制台查看文件的Content Type，应显示为image/jpeg，访问URL时会直接展示图片而非触发下载。

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