我允许用户通过拖放和其他方法将图像加载到页面中。当一个图像被删除时,我使用URL.createObjectURL
转换为一个对象URL来显示图像。我没有撤销URL,因为我重复使用它。
所以,当需要创建一个FormData
对象时,我可以允许他们上传一个包含其中一个图像的表单,有没有什么方法可以将该Object URL反转回Blob
或File
,以便将其附加到FormData
对象?
我允许用户通过拖放和其他方法将图像加载到页面中。当一个图像被删除时,我使用URL.createObjectURL
转换为一个对象URL来显示图像。我没有撤销URL,因为我重复使用它。
所以,当需要创建一个FormData
对象时,我可以允许他们上传一个包含其中一个图像的表单,有没有什么方法可以将该Object URL反转回Blob
或File
,以便将其附加到FormData
对象?
9条答案
按热度按时间z9ju0rcb1#
现代解决方案:
url可以是对象url或普通url。
vngu2lb82#
正如gengkev在上面的评论中所暗示的,看起来最好/唯一的方法是使用异步xhr 2调用:
更新(2018):对于可以安全使用ES 5的情况,Joe在下面给出了一个更简单的基于ES 5的答案。
xdyibdwo3#
也许有人在使用React/Node/Axios时会发现这很有用。我在UI上使用了
react-dropzone
的Cloudinary图像上传功能。lskq00tm4#
再次获取Blob URL的问题是,这将创建Blob数据的完整副本,因此内存中将有两次,而不是一次。使用大的Blob,这会很快消耗你的内存。
不幸的是,File API不给予我们访问当前链接的Blob,当然,他们认为Web作者应该在创建时自己存储Blob,这是真的:
这里最好是存储创建blob时使用的对象:// URL。
如果你担心这会阻止Blob被垃圾收集,你是对的,但是blob:// URL也是如此,直到你撤销它。因此,将指针指向该Blob不会改变任何事情。
但是对于那些不负责创建blob:// URI的人(例如,因为一个库创建了它),我们仍然可以通过覆盖默认的 URL.createObjectURL 和 URL.revokeObjectURL 方法来填补API漏洞,以便它们存储对传递的对象的引用。
请确保在调用生成blob:// URI的代码之前调用此函数。
另一个优点是,它甚至可以检索MediaSource对象,而在这种情况下,获取解决方案只会出错。
cyvaqqii5#
使用fetch的例子如下:
你可以在Chrome控制台上粘贴来测试。这个文件与下载与'sample.xlsx'希望它可以帮助!
lztngnrs6#
请参阅Getting BLOB data from XHR request,它指出BlobBuilder在Chrome中不起作用,所以你需要用途:
mzillmmw7#
不幸的是@BrianFreud的答案不符合我的需要,我有一点不同的需要,我知道这不是@BrianFreud问题的答案,但我把它留在这里,因为很多人带着我同样的需要来到这里。我需要一些类似于“如何从URL中获取文件或blob?”',当前正确答案不符合我的需要,因为它不是跨域的。
我有一个网站,它使用Amazon S3/Azure存储中的图像,并在那里存储使用uniqueidentifiers命名的对象:
示例:http://****. blob.core.windows.net/systemimages/bf142dc9-0185-4aee-a3f4-1e5e95a09bcf
其中一些图像应该从我们的系统界面下载。为了避免通过我的HTTP服务器传递此流量,因为此对象不需要任何安全访问(除了域过滤),我决定在用户的浏览器上直接请求并使用本地处理来为文件提供真实的的名称和扩展名。
为了实现这一点,我引用了亨利Algus的这篇伟大的文章:http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/
1.第一步:为jquery添加二进制支持
2.第二步:使用此传输类型发出请求。
现在你可以使用你想要的Blob创建,在我的情况下,我想把它保存到磁盘。
3.可选:使用FileSaver将文件保存在用户的计算机上
我已经使用FileSaver.js将下载的文件保存到磁盘,如果您需要完成此操作,请使用此JavaScript库:
https://github.com/eligrey/FileSaver.js/
我希望这能帮助其他有更具体需求的人。
nmpmafwu8#
如果您在画布中显示文件,您还可以将画布内容转换为blob对象。
62o28rlo9#
在@Kaiido回答之后,另一种重载URL而不干扰URL的方法是像这样扩展URL类:
用途