Blob URL上载到firebase存储

Question

我使用"react- image -crop“(https://github.com/DominicTobias/react-image-crop)来裁剪图像，然后将其上传到Firebase存储。在我的状态下，来自"react-image-crop“的响应是一个blob:URL。当我调用时：

var storageRef = firebase.storage().ref();
        var mountainImagesRef = storageRef.child(
            "images/" + auth.uid + "/avatar.jpg"
        );
        mountainImagesRef.put(file).then(function(snapshot) {...

我得到了错误：

Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.

我知道我需要传递一个blob或文件，而不是URL，但是我如何解决这个问题呢？

谢谢你的帮忙!

Answer 1

我通过编辑返回的"react-image-crop“承诺修复了这个问题。将退货承诺更改为：

return new Promise((resolve, reject) => {
            canvas.toBlob(blob => {
                if (!blob) {
                    //reject(new Error('Canvas is empty'));
                    console.error("Canvas is empty");
                    return;
                }
                blob.name = fileName;
                console.log(blob);
                resolve(blob);
            }, "image/jpeg");
        });

现在你将得到一个返回的blob，而不是一个blob url。

Answer 2

您可以通过fetch请求从图片URL检索blob：

async blobFromURL(url) {
 blob = await fetch(this.imageUrl).then(r => r.blob());
 return blob
}