Firebase 存储:字符串格式与 base64 格式不匹配:发现无效字符.仅当调试关闭时

Question

我正在尝试将图片文件上传到 Firebase 存储，保存下载网址，并在上传完成后加载它。当我在上面远程运行带有调试 js 的应用程序时，它工作正常。当我关闭调试模式时，它停止处理无效格式异常。当我在真实设备(iOS和Android(中运行时也会发生同样的情况

来自 React Native Image Picker 的 base64 响应数据似乎是正确的

这是我的代码

...
import * as ImagePicker from 'react-native-image-picker'; //0.26.10
import firebase from 'firebase'; //4.9.1
...
handleImagePicker = () => {
const { me } = this.props;
const options = {
title: 'Select pic',
storageOptions: {
skipBackup: true,
path: 'images'
},
mediaType: 'photo',
quality: 0.5,
};
ImagePicker.showImagePicker(options, async (response) => {
const storageRef = firebase.storage().ref(`/profile-images/user_${me.id}.jpg`);
const metadata = {
contentType: 'image/jpeg',
};
const task = storageRef.putString(response.data, 'base64', metadata);
return new Promise((resolve, reject) => {
task.on(
'state_changed',
(snapshot) => {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
},
(error) =>
console.log(error),
() => {
this.onChangeProfileImage();
}
);
});
}
}
onChangeProfileImage = async () => {
const { me } = this.props;
const storageRef = firebase.storage().ref(`/profile-images/user_${me.id}.jpg`);
const profileImageUrl = await new Promise((resolve, reject) => {
storageRef.getDownloadURL()
.then((url) => {
resolve(url);
})
.catch((error) => {
console.log(error);
});
});

// some more logic to store profileImageUrl in the database
}

知道如何解决这个问题吗？

提前谢谢。

Answer 1

经过一些研究和调试，我找到了问题的原因和解决方案。

为什么会这样？

Firebase 使用atob方法对putstring方法发送的 base64 字符串进行解码。 但是，由于 JavaScriptCore 没有对atob和btoa的默认支持，因此无法转换 base64 字符串，因此会触发此异常。

当我们在调试 javascript 远程模式下运行应用程序时，所有 javascript 代码都在 chrome 环境中运行，其中支持atob和btoa。这就是为什么代码在调试打开时有效，而在调试关闭时不起作用的原因。

如何解决？

为了在 React Native 中处理atob和btoa，我们应该编写自己的编码/解码方法，或者安装一个库来为我们处理它。

就我而言，我更喜欢安装base-64库

但下面是一个编码/解码脚本的示例：

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
const Base64 = {
btoa: (input:string = '')  => {
let str = input;
let output = '';
for (let block = 0, charCode, i = 0, map = chars;
str.charAt(i | 0) || (map = '=', i % 1);
output += map.charAt(63 & block >> 8 - i % 1 * 8)) {
charCode = str.charCodeAt(i += 3/4);
if (charCode > 0xFF) {
throw new Error("'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.");
}
block = block << 8 | charCode;
}
return output;
},
atob: (input:string = '') => {
let str = input.replace(/=+$/, '');
let output = '';
if (str.length % 4 == 1) {
throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
}
for (let bc = 0, bs = 0, buffer, i = 0;
buffer = str.charAt(i++);
~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
) {
buffer = chars.indexOf(buffer);
}
return output;
}
};
export default Base64;

用法：

import Base64 from '[path to your script]';
const stringToEncode = 'xxxx';
Base64.btoa(scriptToEncode);
const stringToDecode = 'xxxx';
Base64.atob(stringToDecode);

选择使用自定义脚本或库后，现在我们必须将以下代码添加到index.js文件中：

import { decode, encode } from 'base-64';
if (!global.btoa) {
global.btoa = encode;
}
if (!global.atob) {
global.atob = decode;
}
AppRegistry.registerComponent(appName, () => App);

这将在全球范围内声明atob和btoa。因此，每当在应用程序中调用这些函数时，React Native 将使用全局范围来处理它，然后从 lib 触发encode和decode方法base-64。

所以这是Base64问题的解决方案。

但是，解决此问题后，我在尝试上传较大的图像时发现了另一个Firebase Storage: Max retry time for operation exceed. Please try again问题。正如此问题所暗示的那样，firebase似乎对 React Native 上传的支持有一些限制。

我相信react-native-firebase可能不会在这方面挣扎，因为它已经准备好在本地运行，而不是像firebase那样使用 Web 环境。我还没有测试它来确认，但看起来这将是处理它的最佳方法。

希望这对其他人有帮助。

Answer 2

这个问题现在使用fetch((API 解决了。返回的承诺可以转换为 blob，您可以将其上传到 firebase/storage

这是一个例子

let storageRef = storage().ref();
let imageName = data.name + "image";
let imagesRef = storageRef.child(`images/${imageName}`);
const response = await fetch(image); 
const blob = await response.blob(); // Here is the trick
imagesRef
.put(blob)
.then((snapshot) => {
console.log("uploaded an image.");
})
.catch((err) => console.log(err));