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

Question

我正在研究一个反应，我需要使用firebase存储上传图像到firebase。我正在使用React-nimage-picker从手机中选择图像，这给我提供了Base64编码的数据。

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

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

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);
  }
});

Answer 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');
  });
}

Answer 2

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

Answer 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');
      });
    }

Answer 4

i使用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');
  });
}

Answer 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软件包获取。