likes
comments
collection

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

作者站长头像
站长
· 阅读数 11

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以上的浏览器。