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

Posted 2023-02-22

【中文标题】Firebase 存储：字符串与格式“base64”不匹配：发现无效字符

【英文标题】：Firebase Storage: String does not match format 'base64': Invalid character found

【发布时间】：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”错误，所以不是这样。

【参考方案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 包获取。