当前位置: 首页 > Web前端 > JavaScript

如何在img标签中显示File类型的本地图片,如何在js中获取文件的base64

时间:2023-03-27 10:32:04 JavaScript

File文件并在img中显示。js从本地选取的file文件,显示在img中1.方法一:constwindowURL=window.URL||在img的src中渲染。//但url对象会一直存在于document对象中,只有当文档被卸载(关闭窗口)时才会释放这块内存。//所以,最好在不需要的时候主动释放。释放方法如下:windowURL.revokeObjectURL(src);2、方法二(也是获取base64文件的方法):constreader=newFileReader();reader.readAsDataURL(文件);reader.onload=()=>{constsrc=reader.result;//这里的reader.result是文件的base64。如果是图片,直接在src中显示即可};方法一(createObjectURL)和方法二(readAsDataURL)的区别主要区别:通过URL.createObjectURL(blob),可以得到一个当前文件的内存URL,通过FileReader.readAsDataURL(file)可以得到一串数据:base64执行时间:createObjectURL同步执行(立即)FileReader.readAsDataURL异步执行(稍等)内存使用:createObjectURL返回一个带有hash的url,并一直保存在内存中,直到触发文档被卸载或执行revokeObjectURL到发布。FileReader.readAsDataURL返回包含很多字符的base64,比bloburl消耗更多的内存,但它会在不使用时自动从内存中清除(通过垃圾回收机制)。在兼容性方面,这两个属性都兼容ie10以上设备的浏览器。