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

小学生 - 2022-03-14 12:17:28

---

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

Tags 标签

javascripthtmlhtml5

扩展阅读