File文件在img中显示。
js从本地选择的文件file,在img中展示
1.方式一:
const windowURL = window.URL || window.webkitURL;
const src = windowURL.createObjectURL(_file);
// 返回一个url,就可以直接放在img的src中渲染了。
// 但是该url对象会一直存在在document对象中,只有当document卸载时(关闭窗口)才会释放这个内存。
//所以,最好在你不需要的时候,主动释放。释放方式如下:
windowURL.revokeObjectURL(src);
2.方式二(也是获取文件base64的方法):
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const src = reader.result;
// 这里的reader.result就是文件的base64了。如果是图片的话,就可以直接放到src中展示了
};
方式一(createObjectURL)和方式二(readAsDataURL)的区别
主要区别
- 主要区别:通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
- 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
执行时机:
- createObjectURL是同步执行(立即的)
- FileReader.readAsDataURL是异步执行(过一段时间)
内存使用:
- createObjectURL返回一段带hash的url,并且一直存储在内存中,直到document触发了被卸载或者执行revokeObjectURL来释放。
- FileReader.readAsDataURL则返回包含很多字符的base64,并会比blob url消耗更多内存,但是在不用的时候会自动从内存中清除(通过垃圾回收机制)
兼容性方面两个属性都兼容ie10以上的浏览器。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。