谷歌浏览器 Not allowed to load local resource 的前端解决方法

本文图片均来自对应的链接的截图

前言

做小毕设，我是做前端部分的，有一个头像上传的功能，我想做一下预览功能，但是发现浏览器不让直接加载本地文件，就只能上网找答案了。

其实我平时都不怎么写博客的，但是吧，遇到这个问题之后，看到的都是你抄我，我抄你的，还不是我想要的解决方案，最后我用一个简单的办法解决了之后，就，觉得那些互抄的答案真的…

---

解决方案

用一个 FileReader 把文件读进来，然后再放到图片的 src 属性即可。
详细可以看后面的过程，懂了的就不用看后面了。

---

解决过程

过程面向小白，各路大神不必开喷

面向百度编程，肯定先百度一下，出来很多结果，但发现都是抄答案，都是让改后端的代码；但是我是做前端的，也不想改后端，就只能想其它办法了。

先找到了这个文章： img标签中src访问非当前目录下的文件，采用绝对路径，为什么会显示Not allowed to load local resource？

不想点开链接的可以直接看截图：

但是吧，我用的是 vue，而且我又不怎么会前端，根本看不懂怎么解决的。

但是看到了一个关键点：FileReader 和 readAsDataURL

于是查 readAsDataURL ，来到了这里：FileReader.readAsDataURL()

其实中间还有一点曲折的，这里就不啰嗦了

看这里：

还是不懂，下面有演示：

还是不懂，上传一个照片试试：

好，还是不懂，按下 F12 打开调试，看代码：

然后经过一些曲折，我弄懂了。
通过 FileReader 读一下 type 为 file 的 input 获取到的文件，然后因为 readAsDataURL 是异步请求，所以代码第 6 行就加了一个事件监听，只要文件加载完成，就能把 FileReader 的 result 读出来，然后放到图片的 src 属性上就可以了。
完美解决。

总结

有时候官方文档比别人的经验更好用！