Firebase Storage上传JPG文件崩溃问题求助

一、先解决JPG上传崩溃问题 #

崩溃大概率是因为拍摄的JPG文件体积过大（5MB），或者fetch处理本地file:// URI时的内存问题，可尝试以下方案：

1. 压缩图片后再上传 #

在调用React Native ImagePicker时，直接设置压缩参数缩小文件体积：

// 以expo-image-picker为例
const result = await ImagePicker.launchCameraAsync({
  allowsEditing: false,
  compressImageQuality: 0.3, // 压缩质量，0-1之间，数值越小压缩越厉害
  resizeWidth: 1024, // 限制宽度，高度按比例缩放
});

压缩后文件体积减小，能避免内存溢出导致的崩溃。

2. 替换fetch为文件系统库读取文件 #

使用react-native-fs（或expo-file-system）读取本地文件并转换为Blob，避免原生fetch的潜在问题：

import RNFS from 'react-native-fs';

// 读取文件为base64，再转Blob
const base64Data = await RNFS.readFile(result.uri, 'base64');
const mimeType = result.uri.endsWith('.jpg') ? 'image/jpeg' : 'image/png';
const blob = await fetch(`data:${mimeType};base64,${base64Data}`).then(res => res.blob());

const uploadTask = uploadBytesResumable(myref, blob);

3. 添加错误捕获避免无日志崩溃 #

给上传逻辑套上try-catch，捕获并打印错误信息，方便排查：

try {
  const response = await fetch(result.uri);
  const blob = await response.blob();
  const uploadTask = uploadBytesResumable(myref, blob);
  
  // 监听上传状态（可选）
  uploadTask.on('state_changed', 
    (snapshot) => {},
    (error) => console.error('上传失败:', error)
  );
} catch (error) {
  console.error('处理文件时出错:', error);
}

二、将图片转为PNG格式上传 #

如果需要强制上传PNG，可使用图片处理库将JPG转成PNG后再上传，以expo-image-manipulator为例：

1. 安装依赖（Expo项目） #

npx expo install expo-image-manipulator

2. 转换格式并上传 #

import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';

// 将图片转为PNG
const manipulatedImage = await manipulateAsync(
  result.uri,
  [], // 可添加resize、rotate等操作，这里只转格式
  { format: SaveFormat.PNG, compress: 0.8 }
);

// 转换为Blob并上传
const response = await fetch(manipulatedImage.uri);
const blob = await response.blob();
const uploadTask = uploadBytesResumable(myref, blob);

这样无论原文件是JPG还是PNG，最终都会以PNG格式上传，同时转换过程中也会压缩图片，降低崩溃概率。

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