无法通过Firebase将base64格式图片上传至Google Cloud Storage问题求助

问题原因排查及解决方案 #

你的上传失败是几个常见的参数格式不匹配问题导致的，可按以下步骤排查修复：

1. 首先确认capturedImage.base64是否自带data:image/xxx;base64,前缀：如果本身已经带前缀，手动再加一遍会导致格式异常，直接使用清洗后的字符串即可。
2. 修正MIME类型写法：你测试用的image/jpg不是标准的图片MIME类型，标准写法为image/jpeg，Firebase Storage对格式校验严格，写错会直接抛出参数错误。
3. 清洗base64字符串：部分场景生成的base64会自带换行、空格等空白字符，在指定编码格式上传时会被识别为非法字符，需要先做清洗。
4. 补充元数据配置：指定base64格式上传时，需要同步配置contentType元数据，否则上传后的文件会被识别为二进制文件，无法直接作为图片预览。

可正常运行的代码示例

方案1：纯base64格式上传

// 清洗所有空白字符
const cleanedBase64 = capturedImage.base64.replace(/\s/g, '');
firebase.storage().ref(`...`).putString(cleanedBase64, 'base64', {
  contentType: 'image/jpeg'
});

方案2：data_url格式上传

const cleanedBase64 = capturedImage.base64.replace(/\s/g, '');
// 拼接标准格式的data_url，不要重复加前缀
const dataUrl = `data:image/jpeg;base64,${cleanedBase64}`;
firebase.storage().ref(`...`).putString(dataUrl, 'data_url');

额外说明

你之前不指定编码格式上传成功，是因为putString默认使用raw编码，直接将base64字符串作为原始文本存储，此时上传的文件本质是文本文件，默认contentType为application/octet-stream，并非可直接访问的图片资源，你可以到GCS控制台查看对应文件的元数据确认这一点。

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