web预览本地图片（对象URL）

最新推荐文章于 2024-07-14 21:25:46 发布

咕咕鸡5

最新推荐文章于 2024-07-14 21:25:46 发布

阅读量2.5k

点赞数 1

文章标签： url api 对象 web

本文链接：https://blog.csdn.net/baidu_35407267/article/details/53399436

版权

本文介绍了如何利用HTML5的File API和对象URL（blob URL）实现前端预览本地图片的功能，无需上传到服务器。通过window.URL.createObjectURL()方法创建对象URL，然后在DOM中使用该URL展示图片。在AngularJS中使用时需注意与ngChange的兼容问题，文中给出了相应的解决方案。当不再需要对象URL时，记得使用window.URL.revokeObjectURL()释放内存。

摘要由CSDN通过智能技术生成

前段项目中有用到上传的功能，用的angular-file-upload插件，功能还蛮强大的，界面也很漂亮。当时有个需求是酱紫。添加到上传列表（还未上传时）可以预览图片，如果满意再上传。很遗憾的说我没搞出来，当时不知道h5 的file api，更不知道blob URL是什么鬼。怂怂地就跟“大哥”商量把需求改成上传后预览，点击预览的时候请求后台，返回服务器上的路径，并打开，这样肯定是ok的，但是与原需求不完全契合，feeling lost。

回家无意翻红宝书，看到H5新增的，File Api这部分有file reader的新对象，更有对象URL（blob URL），这才是这篇文章的主角，让之前的欠缺的功能得到解决。

对象URL（blob URL）指的是引用保存在File或者Blob中数据的URL。使用对象URL的好处死可以不必把文件内容取到JavaScript中而直接使用文件内容。为此，只要在需要文件内容的地方提供对象URL即可。要创建对象URL，可以使用window.URL.createObjectURL()方法，并传入File或者Blob对象。这个函数的返回值是一个字符串，指向一块内存的地址。因为这个字符串是URL，所以在DOM中也能使用，上demo。