我允许用户通过拖放和其他方法将图像加载到页面中。放置图像时，我使用URL.createObjectURL转换为对象 URL 以显示图像。我不会撤销 url，因为我会重复使用它。
所以，当谈到时间来创建一个FormData对象，所以我可以让他们上传的形式，在它的形象之一，是有一些方法，然后我可以扭转这一目标URL回一个Blob或File这样我就可以再附加到一个FormData目的？
如何从对象 URL 获取文件或 blob？
IT技术
javascript
html
fileapi
blobs
2021-02-06 22:15:22
6个回答
现代解决方案：
let blob = await fetch(url).then(r => r.blob());
url 可以是对象 url 或普通 url。
正如 gengkev 在他上面的评论中提到的，看起来最好/唯一的方法是使用 async 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 的答案。
也许有人在使用 React/Node/Axios 时发现这很有用。我react-dropzone在 UI上将其用于 Cloudinary 图像上传功能。
axios({
method: 'get',
url: file[0].preview, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
responseType: 'blob'
}).then(function(response){
var reader = new FileReader();
reader.readAsDataURL(response.data);
reader.onloadend = function() {
var base64data = reader.result;
self.props.onMainImageDrop(base64data)
}
})
使用 fetch 例如如下：
fetch(<"yoururl">, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + <your access token if need>
},
})
.then((response) => response.blob())
.then((blob) => {
// 2. Create blob link to download
const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `sample.xlsx`);
// 3. Append to html page
document.body.appendChild(link);
// 4. Force download
link.click();
// 5. Clean up and remove the link
link.parentNode.removeChild(link);
})
您可以粘贴到 Chrome 控制台进行测试。带有“sample.xlsx”的下载文件希望它可以帮助！
请参阅从 XHR 请求中获取 BLOB 数据，其中指出 BlobBuilder 在 Chrome 中不起作用，因此您需要使用：
xhr.responseType = 'arraybuffer';