Firebase 存储：字符串与格式“base64”不匹配：发现无效字符答案

【问题标题】：Firebase Storage: String does not match format 'base64': Invalid character foundFirebase 存储：字符串与格式“base64”不匹配：发现无效字符
【发布时间】：2017-05-09 00:46:17
【问题描述】：

我正在开发 react-native，我需要使用 Firebase Storage 将图像上传到 Firebase。我正在使用react-native-image-picker 从手机中选择图像，这为我提供了 base64 编码数据。

当我尝试将图像上传到 Firebase 时，它给了我错误 Firebase Storage: String does not match format 'base64': Invalid character found，但我已经检查了该字符串是否是带有正则表达式的有效 base64 字符串！

我已经从这里阅读了一些答案，但我尝试了所有这些。这是我的代码：

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image, 'base64').then(() => {
    console.log('Image uploaded');
  });
}

图像选择器：

ImagePicker.showImagePicker(ImageOptions, (response) => {
  if (response.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    uploadImage(response.data);
  }
});

【问题讨论】：

您找到解决方案了吗？我正在做同样的事情，但似乎无法让它发挥作用。
@activelogic 我最终使用 react-native-fetch-blob 上传 blob 而不是 base64 字符串
我收到此错误，但仅在模拟器中。它在生产模式下工作正常。剥离开头会出现“不是有效的数据 URL”错误，所以不是这样。

标签： javascript android firebase react-native firebase-storage

【解决方案1】：

如果 image 是 base64 数据 URL，您可以使用“data_url”参数和元数据：

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image, 'data_url', {contentType:’image/jpg’}).then(() => {
    console.log('Image uploaded');
  });
}

【讨论】：

【解决方案2】：

您需要从图像变量"data:image/jpeg;base64, 中删除此字符串。需要only data

【讨论】：

我也这样做了，没有运气。但我最终使用 blob 上传图片
@corasan 你介意上传你的 blob 代码吗？我和你的情况完全一样

【解决方案3】：

image.substring(23)

function uploadImage(image){
      const user = getCurrentUser();
      const refImage = app.storage().ref(`profileImages/${user.uid}`);

      refImage.putString(image.substring(23), 'base64').then(() => {
        console.log('Image uploaded');
      });
    }

【讨论】：

问题在于，这并不适用于所有情况，例如内容类型为 image/png 而不是 image/jpeg 时。就像我在回答中所说的那样，我认为拆分是一种更简单、更一致的方式

【解决方案4】：

我使用 split()。

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image.split(',')[1], 'base64').then(() => {
    console.log('Image uploaded');
  });
}

【讨论】：

【解决方案5】：

我使用 google bucket url 而不是使用firebase/storage api 和expo-file-system 包将图像/视频从手机加载到firebase。这是我的代码：

const sendPhotoOrVideo = () => {
    FileSystem.uploadAsync(
      'https://storage.googleapis.com/upload/storage/v1/b/YOUR_BUCKET_NAME/o?uploadType=media&name=FILE_NAME',
      'FILE_LOCATION',
      {
        headers: {
          Authorization:
            'Bearer YOUR_OAUTH2_TOKEN',
        },
      },
    )
}

FileSystem.uploadAsync 来自expo-file-system 包。 'FILE_LOCATION' 使用 expo-image-picker 包获取。

【讨论】：