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

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

前言

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

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


解决方案

用一个 FileReader 把文件读进来,然后再放到图片的 src 属性即可。
详细可以看后面的过程,懂了的就不用看后面了。
在这里插入图片描述


解决过程

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

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

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

不想点开链接的可以直接看截图:
在这里插入图片描述
在这里插入图片描述

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

但是看到了一个关键点:FileReaderreadAsDataURL

于是查 readAsDataURL ,来到了这里:FileReader.readAsDataURL()

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

看这里:
在这里插入图片描述
还是不懂,下面有演示:
在这里插入图片描述
还是不懂,上传一个照片试试:
在这里插入图片描述
好,还是不懂,按下 F12 打开调试,看代码:
在这里插入图片描述
然后经过一些曲折,我弄懂了。
通过 FileReader 读一下 type 为 file 的 input 获取到的文件,然后因为 readAsDataURL 是异步请求,所以代码第 6 行就加了一个事件监听,只要文件加载完成,就能把 FileReaderresult 读出来,然后放到图片的 src 属性上就可以了。
完美解决。

总结

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

  • 7
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前端报错"Not allowed to load local resource"时,这通常是由于浏览器安全策略的限制导致的。浏览器默认不允许通过本地文件系统加载资源,以防止恶意网站读取用户的本地文件。为了解决这个报错,你可以尝试以下几种方法: 1. 使用Web Server for Chrome插件:这是一种在本地搭建Web服务器的方法,通过将你的文件放在Web服务器上,然后通过浏览器访问服务器上的文件来解决该问题。你可以在Chrome网上应用商店中搜索并下载Web Server for Chrome插件。然后按照插件的使用说明配置服务器,并选择你想要访问的文件。 2. 配置Spring Boot项目:如果你在使用Spring Boot项目,并且想要在前端加载本地资源,你可以通过配置Spring的资源处理器来解决该问题。你可以创建一个配置类,使用`addResourceHandlers`方法来指定本地资源的访问路径。根据你的具体情况,你需要修改`addResourceLocations`方法中的路径为你想要访问的本地资源的路径。 3. 将资源上传到服务器:如果你的资源是需要在生产环境中访问的,你可以将资源上传到服务器上,并通过服务器的URL来访问资源,而不是直接使用本地文件系统的路径。这样可以避免浏览器的安全策略限制。 需要注意的是,以上方法只是解决"Not allowed to load local resource"报错的几种常见方法,具体的解决方法还要根据你的具体情况进行调整和实施。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Not allowed to load local resource: file:///,浏览器禁止访问浏览器图片,文件解决方法](https://blog.csdn.net/weixin_42802725/article/details/123460700)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Not allowed to load local resource: 报错解决方法](https://blog.csdn.net/bwddd/article/details/81530446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值