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

您可以通过获取请求从图像网址中检索Blob：

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

Answer 2

我通过编辑返回的“ react-image-crop”的Promise来解决此问题。将退货承诺更改为：

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网址。

Blob URL上传到Firebase存储

2 个答案: