blocks|key|285941|text|正如gengkev在上面的评论中暗示的那样，看起来最好的/唯一的方法是使用异步xhr2调用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285942|var+xhr+=+new+XMLHttpRequest();
xhr.open('GET',+'blob:http%253A//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();|code-block|syntax|javascript|285943|更新(2018)：对于可以安全使用ES5的情况，乔有一个更简单的基于ES5的答案。|285944|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

As gengkev alludes to in his comment above, it looks like the best/only way to do this is with an async xhr2 call:

<pre><code>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();
</code></pre>

Update (2018): For situations where ES5 can safely be used, Joe has a simpler ES5-based answer below.

blocks|key|502744|text|如果无论如何都要在画布中显示文件，还可以将画布内容转换为blob对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|502745|canvas.toBlob(function(my_file){
++//.toBlob+is+only+implemented+in+>+FF18+but+there+is+a+polyfill+
++//for+other+browsers+https://github.com/blueimp/JavaScript-Canvas-to-Blob
++var+myBlob+=+(my_file);
})|code-block|syntax|javascript|502746|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you show the file in a canvas anyway you can also convert the canvas content to a blob object.

<pre><code>canvas.toBlob(function(my_file){
 //.toBlob is only implemented in &gt; FF18 but there is a polyfill 
 //for other browsers https://github.com/blueimp/JavaScript-Canvas-to-Blob
 var myBlob = (my_file);
})
</code></pre>

blocks|key|285995|text|参见Getting+BLOB+data+from+XHR+request，它指出BlobBuilder不能在Chrome上工作，所以你需要使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|285996|xhr.responseType+=+'arraybuffer';|code-block|syntax|javascript|285997|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8022425/getting-blob-data-from-xhr-request^0|2|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

See <a href="https://stackoverflow.com/questions/8022425/getting-blob-data-from-xhr-request">Getting BLOB data from XHR request</a> which points out that BlobBuilder doesn't work in Chrome so you need to use:

<pre><code>xhr.responseType = 'arraybuffer';
</code></pre>

blocks|key|502792|text|也许有人会在使用React/Node/Axios时发现这一点很有用。我将其用于我的Cloudinary图像上传功能，并在UI上使用react-dropzone。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|502793|++++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)
+++++++++}

++++})|code-block|syntax|javascript|502794|entityMap^0|1T|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Maybe someone finds this useful when working with React/Node/Axios. I used this for my Cloudinary image upload feature with <code>react-dropzone</code> on the UI.

<pre><code> 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)
 }

 })
</code></pre>

blocks|key|286063|text|现代解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|286064|let+blob+=+await+fetch(url).then(r+=>+r.blob());|code-block|syntax|javascript|286065|url可以是对象url或普通url。|286066|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Modern solution:

<pre><code>let blob = await fetch(url).then(r =&gt; r.blob());
</code></pre>

The url can be an object url or a normal url.

blocks|key|502850|text|以fetch为例，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|502851|+fetch(<"yoururl">,+{
++++method:+'GET',
++++headers:+{
++++++++'Content-Type':+'application/json',
++++++++'Authorization':+'Bearer+'+%2B+<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);
})|code-block|syntax|javascript|502852|你可以粘贴到Chrome控制台上进行测试。用'sample.xlsx‘下载的文件，希望能帮上忙！|502853|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Using fetch for example like below: 

<pre><code> fetch(&lt;"yoururl"&gt;, {
 method: 'GET',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': 'Bearer ' + &lt;your access token if need&gt;
 },
 })
.then((response) =&gt; response.blob())
.then((blob) =&gt; {
// 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);
})
</code></pre>

You can paste in on Chrome console to test. the file with download with 'sample.xlsx' Hope it can help!

blocks|key|502906|text|根据@Kaiido的回答，另一种重载URL而不干扰URL的方法是像这样扩展URL类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|502907|export+class+URLwithStore+extends+URL+{
++static+createObjectURL(blob)+{
++++const+url+=+super.createObjectURL(blob);
++++URLwithStore.store+=+{+...(URLwithStore.store+??+{}),+[url]:+blob+};
++++return+url;
++}

++static+getFromObjectURL(url)+{
++++return+(URLwithStore.store+??+{})[url]+??+null;
++}

++static+revokeObjectURL(url)+{
++++super.revokeObjectURL(url);
++++if+(
++++++new+URL(url).protocol+===+"blob:"+&&
++++++URLwithStore.store+&&
++++++url+in+URLwithStore.store
++++)
++++++delete+URLwithStore.store[url];
++}
}|code-block|syntax|javascript|502908|用法|502909|const+blob+=+new+Blob(+["foo"]+);
const+url+=+URLwithStore.createObjectURL(+blob+);
const+retrieved+=+URLwithStore.getFromObjectURL(+url+);
console.log(+"retrieved+Blob+is+Same+Object?",+retrieved+===+blob+);|502910|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Following @Kaiido answer, another way to overload URL without messing with URL is to extend the URL class like this:
<pre><code>export class URLwithStore extends URL {
 static createObjectURL(blob) {
 const url = super.createObjectURL(blob);
 URLwithStore.store = { ...(URLwithStore.store ?? {}), [url]: blob };
 return url;
 }

 static getFromObjectURL(url) {
 return (URLwithStore.store ?? {})[url] ?? null;
 }

 static revokeObjectURL(url) {
 super.revokeObjectURL(url);
 if (
 new URL(url).protocol === &quot;blob:&quot; &amp;&amp;
 URLwithStore.store &amp;&amp;
 url in URLwithStore.store
 )
 delete URLwithStore.store[url];
 }
}
</code></pre>
Usage
<pre><code>const blob = new Blob( [&quot;foo&quot;] );
const url = URLwithStore.createObjectURL( blob );
const retrieved = URLwithStore.getFromObjectURL( url );
console.log( &quot;retrieved Blob is Same Object?&quot;, retrieved === blob );
</code></pre>

I am allowing the user to load images into a page via drag&amp;drop and other methods. When an image is dropped, I'm using <code>URL.createObjectURL</code> to convert to an object URL to display the image. I am not revoking the url, as I do reuse it.

So, when it comes time to create a <code>FormData</code> object so I can allow them to upload a form with one of those images in it, is there some way I can then reverse that Object URL back into a <code>Blob</code> or <code>File</code> so I can then append it to a <code>FormData</code> object?

How to get a file or blob from an object URL?

我允许用户通过拖放和其他方法将图像加载到页面中。当图像被删除时，我使用URL.createObjectURL将其转换为object URL以显示图像。我没有撤销这个url，因为我确实重用了它。因此，当需要创建一个FormData对象以便我可以允许他们上传包含其中一个图像的表单时，有没有什么方法可以将该对象的URL还原为...

问如何从对象URL获取文件或blob？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从对象URL获取文件或blob？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从对象URL获取文件或blob？
EN