React项目中如何不使用HTML表单，仅通过代码向Firebase上传图片

你当前的问题核心是直接传入文件路径字符串给uploadBytes——Firebase会把这个字符串本身当作文件内容上传，而不是读取对应路径的图片文件，导致上传的文件是纯文本（内容是../images/image.jpg），自然无法预览。

以下是两种可行的实现方式：

方法1：从Public目录获取静态图片（推荐） #

如果你的图片放在项目根目录的public文件夹下（比如public/images/image.jpg），可以通过fetch获取图片资源并转为Blob后上传：

// 1. 获取图片并转为Blob
const imgResponse = await fetch('/images/image.jpg');
const imgBlob = await imgResponse.blob();

// 2. 配置元数据（匹配图片实际类型）
const metadata = { contentType: 'image/jpeg' };

// 3. 上传到Firebase Storage
await uploadBytes(storageRef, imgBlob, metadata);

方法2：导入Src目录下的图片 #

如果图片放在src目录内（比如src/images/image.jpg），先通过import导入图片路径，再用fetch处理：

// 导入图片路径（webpack会自动处理编译后的URL）
import targetImage from '../images/image.jpg';

// 转为Blob
const imgResponse = await fetch(targetImage);
const imgBlob = await imgResponse.blob();

// 上传
const metadata = { contentType: 'image/jpeg' };
await uploadBytes(storageRef, imgBlob, metadata);

关键注意事项 #

• 确保路径正确：Public目录下的文件使用根相对路径（/xxx），Src目录下的图片必须通过import获取编译后的URL，不能直接用相对路径字符串。
• 元数据的contentType要和图片实际类型一致：JPG用image/jpeg，PNG用image/png，SVG用image/svg+xml，避免类型不匹配导致预览异常。

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