Javascript Blob URL上载到firebase存储

我正在使用“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，但我如何才能解决这个问题

---

谢谢你的帮助

您可以通过获取请求从图像URL检索blob：

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

---

通过编辑返回的“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。

谢谢您的回答。我仍然得到错误。返回是一个承诺，这可能是错误的原因吗？获取请求是异步的，您需要等待它得到解决后再上载它。我从未使用过这个插件，但似乎有一种简单的方法可以检索blob而不是文档上的url：returnnewpromise（（resolve，reject）=>{canvas.toBlob（blob=>{blob.name=fileName；resolve（blob）；}，'image/jpeg'，1）；}）；您从哪里获取文件名？