el-upload点击没反应，m1 mac本开发用Chrome浏览器上传文件点击没反应

已于 2023-06-07 16:19:54 修改
阅读量1.5w 收藏 9
点赞数 6
分类专栏： element-ui 文章标签： macos vue.js 前端
于 2022-06-27 13:16:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38652871/article/details/125481954
版权

描述

最近换了 mac本做前端开发，项目用的 element-ui，浏览器用的 Chrome 浏览器，上传文件功能遇到了问题

问题

在这里插入图片描述
在这里插入图片描述
可以看到用的 el-upload ，但是点击没反应
去 element-ui 官网点击
在这里插入图片描述
还是没反应，然后就头疼了，换之前的 windows11 的电脑测试一下，竟然管用

这时候应该就能确定问题在哪里了：
mac 系统的锅，应该是 input type=file 没有权限的原因

解决问题

系统便好设置 - 安全性与隐私 - 完全磁盘访问权限 - 解锁 - 把浏览器选项钩上就好了
在这里插入图片描述
在这里插入图片描述

问题定位

网上说的，mac 12.4 版本弄上去的(手里没有以前保本的 mac 本，所以没法验证)，涉及隐私，需要用户手动授权

我勒个擦，这岂不是以后 mac 本用来办公需要上传文件啥的，需要用户手动设置？？？

2023-06-07 追加

偶尔的用着用着就又不能上传文件了，今天又找了一个设置记录一下

  • chrome - 设置
    在这里插入图片描述
  • 设置 - 隐私和安全
    在这里插入图片描述
  • 隐私和安全 - 网站设置
    在这里插入图片描述
  • 网站设置 - 弹出窗口和重定向在这里插入图片描述
  • 选择允许即可在这里插入图片描述
Vue3 - Element Plus 上传组件 before-upload 钩子函数不触发，解决 el-upload 上传文件后 before-upload 不执行也没反应（别的都行，就这个不行）
王二红
12-16 6826
vue3，elementplus，el-upload，Upload上传组件，elementplus上传组件的before-upload钩子函数不触发怎么办，为什么before-upload不生效也不报错，vue3elementplus上传组件before-upload不触发，before-upload一直不生效怎么办，vue3Elementplus上传组件beforeUpload上传前限制失效问题怎么解决，钩子函数不好使不执行咋办，el-upload上传文件之前的钩子函数一直不触发不执行，Vu
JavaEE - Tomcat和HTTP协议
旧时言的博客
06-06 1万+
HTTP (全称为 “超文本传输协议”) 是一种应用非常广泛的 应用层协议.HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议.最新的 HTTP 3 版本也正在完善中, 目前 Google / Facebook 等公司的产品已经支持了.HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP实现)目前我们主要使用的还是 HTTP1.1 和 HTTP2.0 . 当前课堂上讨论的 HTTP 以 1.1 版
mac电脑使用谷歌浏览器，el-upload上传文件点击没反应
小马甲
11-06 6972
在mac电脑中，使用谷歌浏览器，点击el-upload进行web端的文件上传没反应，但是有些时候使用360极速浏览器又可以，所以让我非常的莫名奇妙。
element-ui 中 使用＜el-upload＞＜/el-upload＞组件，第二次点击上传无反应
Missbelover的博客
03-09 2827
【代码】element-ui 中 使用组件，第二次点击上传无反应。
vue2 + el-upload 在谷歌浏览器点击无效
七号程序员的博客
03-22 1385
项目突然出现点击el-upload上传文件没有反应的情况，到element UI官网尝试点击也无法触发上传事件，使用以下两种办法尝试后成功触发。
el-upload标签文件一次提交多次重复上传无反应问题
m0_67098662的博客
06-06 2074
el-upload标签文件一次提交多次重复上传无反应问题解决方案
el-upload 二次上传没有反应，clearFiles不起作用
qq_40334370的博客
04-11 3463
el-upload 二次上传没有反应，clearFiles不起作用
01 【nodejs简介】
DSelegent的博客
08-25 822
01 【nodejs简介】
Python用Requests爬虫实现截屏翻译
weixin_46600862的博客
06-25 2161
Python用Requests爬虫实现截屏翻译
element ui el-upload上传图片失效
Zhooson的博客
02-25 1010
<el-upload ref="uploadRef" :action="upload.uploadUrl" accept="image/png, image/jpeg, image/jpg" :on-success="handleAvatarSuccess" :limit="1" :show-file-list="false" &gt...
(实战-改bug)element ui Upload组件 上传一次后，再次点击上传 没反应
m0_67066313的博客
10-08 2922
日常改bug，减少出错率
几种解决 element-ui 的 el-upload 组件上传文件跨域问题的方法
热门推荐
庄周de蝴蝶的博客
01-27 2万+
前言 最近在开发基于 SpringBoot 和 Vue 的前后端分离项目的时候，在使用 element-ui 的 el-upload 组件的时候遇到了跨域的问题，尽管之前我也写过一篇关于解决跨域问题的文章，但是发现还是无法解决使用 action 时的跨域问题，因此本文将基于后端 SpringBoot 和 基于 nginx 反向代理的解决跨域的方法，本文的完整代码（前端和后端代码）也已上传到GitHub。 使用 action 的解决方法 在具体的讲解之前先声明，本文的后端都基于 8888 端口，前端基于 8
macbook pro m1 安全性与隐私无法解锁，鼠标点击无响应，谷歌浏览器，postman无法选择上传文件
u013958151的博客
01-20 3917
我是m1芯片的mbp，系统是big sur 11.1，刚买不久，谷歌浏览器点击file按钮上传文件，在弹出的对话框始终无法选择文件，鼠标点击没有任何反应，postman也一样。 在安全性与隐私对话框里面也无法点击任何内容，无法解锁 后面打电话给官方客服，按照客服的指导，电脑关机，合上电脑屏幕，等待了30秒，再次开机，问题解决了。。。 没想到苹果还有这样的问题，再次见证了重启大法 ...
el-upload中的before-upload不生效
m0_51077750的博客
10-19 2946
由于执行函数 onChange() 时，已经将 file 加入fileList 数组了，所以当我们发现文件不符合条件时，要将 文件从fileList 中吐出来。before-upload是在上传文件时触发，不是添加文件时触发，添加文件时触发 on-change。所以如果我们要在添加文件时，对文件的大小和后缀等等进行判断，可以用 on-change 方法来实现。我们先来看看官方对before-upload的定义。
解决element-ui的upload组件上传文件失败后，仍显示在列表上（成功才显示，失败不显示）
Missying55的博客
03-19 1万+
el-upload 上传失败后，文件仍显示在列表上，如图： 这个pdf文件上传失败，仍显示在列表，给人错觉是上传成功的，所以，我们把它去掉~，下面上代码： <el-upload class="upload-file padding" ref="uploadFile" multiple accept="image/jpeg,image/png,image/gif,application/pdf" :http-request="uploadFile" :on-change="onChange
el-upload的bug:file-list绑定数据无效/空白
GracieLaw的博客
06-15 6731
github的issue说明 解决方法 给el-upload绑定ref属性upload 通过this.$refs.upload.uploadFiles来获取&处理数据
elementUI upload 上传 传参
weixin_30684743的博客
08-24 805
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" mult...
element el-upload文件上传时，mac笔记本无法获取到file.type，就无法校验到上传的文件类型
Meraln的博客
06-02 3283
今天项目中碰到了在使用el-upload时，mac笔记本无法获取到钩子函数的before-upload方法中的file回调参数中的type属性，就无法去进行校验，然后就换成了去校验file.name，判断是否以 .xlsx 和 .xls结尾的excel文件 beforeUpload (file: any) { const uploadFileSize: boolean = file.size / 1024 / 1024 < 10 const fileType: boolean = f
Element UI Upload 上传文件只能上传一次 ，再次点击上传后无反应的问题
m0_48259951的博客
01-18 8143
Element UI Upload 上传文件上传文件一次 ，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。 方法一：利用 :on-success ref=‘upload’ :on-success=“handleSuccess” 注意： ref='upload 一定要加上ref 不然不起作用 <el-upload class="upload-demo"
el-upload上传之后点击无反应
最新发布
02-13
### Element UI `el-upload` 组件点击上传无反应解决方案 当遇到 `el-upload` 组件点击上传按钮无反应的情况时，可能的原因有多种。以下是详细的排查方法和解决方案： #### 1. 检查网络请求配置 确保 `action` 属性指向的 URL 是有效的，并且服务器端能够正常接收并处理该请求。如果服务器地址不正确或无法访问，则会触发 404 错误[^1]。 ```javascript <el-upload :action="uploadUrl"> </el-upload> ``` 确认 `uploadUrl` 的值是否正确设置，并验证其可访问性。 #### 2. 验证事件绑定情况 检查是否有其他 JavaScript 或 Vue 实例中的逻辑阻止了默认行为的发生。例如，在某些情况下，表单验证失败可能会导致提交操作被中断[^2]。 对于这种情况，可以尝试简化代码来排除干扰因素的影响： ```html <!-- 移除复杂的校验逻辑 --> <button @click="handleUpload">手动触发上传</button> <script> export default { methods: { handleUpload () { const uploadComponent = this.$refs['fileUploader'] if(uploadComponent){ uploadComponent.submit() } }, } } </script> ``` 通过这种方式可以直接调用组件实例的方法来进行测试。 #### 3. 查看控制台日志输出 打开浏览器开发者工具查看 Network 和 Console 标签页下的信息。如果有任何异常抛出或是 HTTP 请求状态码不是预期的结果（比如 2xx），那么这些都将有助于定位具体的问题所在。 #### 4. 更新依赖版本 有时框架本身存在的 bug 可能会造成此类现象；因此建议保持所使用的库处于最新稳定版。可以通过 npm/yarn 来更新 element-ui 到最新的发布版本。 ```bash npm install element-ui@latest --save # or yarn add element-ui@latest ``` 完成上述步骤之后重新构建项目再做观察。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值