Firebase存储上传破碎的图像

Question

我使用this cropper制作了裁剪图像。它返回了base64版本的裁剪图像。

我正在尝试将base64图片转换为blob或file，以便能够使用以下代码将其上传到firebase storage。

var imageBase64 = $scope.cropper.croppedImage.split(',')[1];
var blob = new Blob([imageBase64], {type: 'image/png'});
var file = new File([imageBase64], 'imageFileName2.png', {type: 'image/png'});

当我尝试打印file时，它创建了一个看似这样的实际File对象。

{
    lastModified:1471604365544,
    lastModifiedDate:"Fri Aug 19 2016 18:59:25 GMT+0800 (PHT)",
    name:"imageFileName2.png",
    size:228808,
    type:"image/png",
    webkitRelativePath:""
}

虽然File已成功上传，但结果已中断。 firebase storage仪表板上的预览看起来像这样（它永远不会停止加载，当我尝试下载时，我的图像已经损坏了）：

为了证明我的base64图片没有被破坏，这里是我的Akasha的base64图片，您可以在此base64 viewer中进行预览。

Answer 1

在3.3.0 JS客户端中，您只需上传base64字符串（docs）！

var imageBase64 = $scope.cropper.croppedImage.split(',')[1];
ref.putString(imageBase64, 'base64').then(function(snapshot) {
  console.log('Uploaded a base64 string!');
});

Blob和File API都采用UInt8Array base64字符串不是，因此您基本上创建了一个包含单个项目的数组，这是base64字符串，它不是有效的blob。使用上面的上传来解决问题。