本文图片均来自对应的链接的截图
前言
做小毕设,我是做前端部分的,有一个头像上传的功能,我想做一下预览功能,但是发现浏览器不让直接加载本地文件,就只能上网找答案了。
其实我平时都不怎么写博客的,但是吧,遇到这个问题之后,看到的都是你抄我,我抄你的,还不是我想要的解决方案,最后我用一个简单的办法解决了之后,就,觉得那些互抄的答案真的…
解决方案
用一个 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
属性上就可以了。
完美解决。
总结
有时候官方文档比别人的经验更好用!