File类型本地图片如何在img标签中显示,js如何获取文件的base64
小学生 -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以上的浏览器。
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。