如何从对象 URL 获取文件或 Blob？

javascript html fileapi blobs

2022-08-30 01:04:42

我允许用户通过拖放和其他方法将图像加载到页面中。当图像被删除时，我使用转换为对象URL来显示图像。我没有撤销网址，因为我确实重复使用它。URL.createObjectURL

因此，当需要创建一个对象时，我可以允许他们上传一个包含这些图像之一的表单，那么有没有办法将该对象URL反转回一个，然后我可以将其附加到对象中？FormDataBlobFileFormData

答案 1

现代解决方案：

let blob = await fetch(url).then(r => r.blob());

该网址可以是对象网址，也可以是普通网址。

答案 2

正如 gengkev 在上面的评论中提到的那样，看起来最好/唯一的方法是使用异步 xhr2 调用：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
    // myBlob is now the blob that the object URL pointed to.
  }
};
xhr.send();

更新（2018）：对于可以安全使用ES5的情况，Joe在下面提供了一个更简单的基于ES5的答案。