el upload图片二次上传无反应问题

于 2024-12-13 11:17:36 发布
阅读量339 收藏
点赞数 2
文章标签： 上传组件二次上传无反应 upload 组件上传 element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45896126/article/details/144445607
版权

在下两种思路：
1、调用api在上传成功阶段清除上传组件缓存

      this.$refs.uploadRef.clearFiles();

2、上传组件绑定key值 只要有办法让重置刷新就行
在上传成功时重置key置 触发组件更新

秃头男神
关注
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
Aotman_的博客
07-16 2756
Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件
el-upload 第一次上传失败，无法再次上传，二次上传无效
我的小鱼干呢！
12-07 1775
1. upload 组件二次上传失效分析。 2. upload 组件二次上传失效解决方案。
element-ui 中 使用＜el-upload＞＜/el-upload＞组件，第二次点击上传无反应
Missbelover的博客
03-09 2859
【代码】element-ui 中 使用组件，第二次点击上传无反应。
(实战-改bug)element ui Upload组件 上传一次后，再次点击上传 没反应
m0_67066313的博客
10-08 2944
日常改bug，减少出错率
el-upload 二次上传没有反应，clearFiles不起作用
qq_40334370的博客
04-11 3480
el-upload 二次上传没有反应，clearFiles不起作用
el-upload 自定义上传成功 点击第二次上传没反应
weixin_45599105的博客
11-29 1151
el-upload 自定义上传成功 点击第二次上传没反应
Vue + el-upload阿里云文件上传进度条功能，阿里云文件上传切片进度条功能实现，el-upload文件上传真实进度条
02-27
### Vue + Element UI (el-upload) 阿里云文件上传进度条功能实现 #### 一、背景知识 `el-upload` 是Element UI提供的一个用于处理文件上传的组件。而阿里云OSS(Object Storage Service) 提供了稳定可靠的云端存储...
el-upload上传不了同名文件
最新发布
04-09
当用户尝试上传同一名字的文件时，某些情况下会发现第二次选择相同文件后并未触发新的上传请求。这主要是由于浏览器对于输入框 `<input type="file">` 的行为所致——如果两次选择的是同一个文件，则不会触发 change...
【Vue.js中的异步文件上传】：Promise和async_await实现上传任务管理
[【Vue.js中的异步文件上传】：Promise和async_await实现上传任务管理](https://d2jq2hx2dbkw6t.cloudfront.net/66/Vue.js File Upload.png) # 摘要 本文系统地探讨了Vue.js中异步文件上传的实现与优化策略。首先...
vue中 input file中的文件上传后如何清空input中的文件
03-03
如Element UI的`<el-upload>`组件，应使用组件提供的`clearFiles()`方法 --- 通过以上方法，可以可靠地实现文件输入框的清空操作，同时保持Vue的响应式特性。推荐优先使用ref直接操作DOM的方案，既高效又兼容性好...
Ajax文件上传进度条优化：掌握这些技巧，提升用户满意度！
![基于ajax实现文件上传并显示进度条]...在Web开发中，文件上传是一种常见的操作，而Ajax（Asynchronous JavaScript and XML）技术提供了无刷新提交表单的能力。文件上传利用了HTTP协议中的POST请求，该请求包
element ui Upload组件 上传一次后，再次点击上传 没反应
LJJONESEED的博客
06-26 443
【代码】element ui Upload组件 上传一次后，再次点击上传 没反应。
element upload文件上传第二次上传失败的解决方法
shalDream的博客
02-27 1900
【代码】element upload文件上传第二次上传失败的解决方法。
element ui upload组件文件上传一次 后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
qq_39877681的博客
05-10 5238
问题：Element UI Upload 组件文件上传一次 后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。 原因：第一次上传文件后，浏览器还保存着我们已经上传的文件，所以要想继续上传文件，就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件 利用 :on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件 ref="upload"与this.$refs[“upload”]要对应。 <
el-upload解决无法二次上传问题
h_未来可期_的博客
01-16 5899
el-upload无法二次上传、二次上传失败
在vue2中，使用el-upload组件进行批量上传时，使用了limit进行限制，第一次上传了limit个文件后，无法再次上传问题处理
2301_77084596的博客
08-23 1295
使用this.$refs.upload.clearFiles()解除限制失败的原因：这里的el-upload上传时使用http-request进行自定义上传，在使用http-request进行上传时on-error、on-success失效了，无法执行，当然在http-request对应的自定义上传事件中也尝试过，失败。在使用el-upload二次封装的组件进行自定义批量上传时，每次上传文件时进行了limit限制:limit='30'，当第一次批量上传了limit数量的文件后，无法二次进行上传。
element :on-change事件调用两次的问题
myl_0808的博客
04-12 6899
element :on-change事件调用两次的问题 原因： 具体应用代码： <el-upload ref="configUpload" class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadChange" > <el-icon class="el-icon--upload"><upload-f
ElementPlus非表单组件ElUpload值更新后校验不消失问题
小绵杨
06-16 1469
先触发表单的必填校验(点击提交按钮)，然后再上传文件，必填校验的提示一直存在，如果再次点击提交，手动触发表单校验，必填校验消失，说明表单中的值是改变了的，但是值改变没有触发校验。
前端开发中遇到的问题以及解决方案记录
huiaixing的博客
06-01 1453
问题：在el-table的表头中添加一个图标，点击图标会在popover里出现一个列表，点击每一项会添加class，然后加上背景颜色。但是点击后数据是变了，选择项已经到了当前项，查看元素也发现class加上去了，但是视图却没变化。解决：大部分项目应该使用的旧版的element-ui，所以给的示例是可能很多人没有加上slot-scope，这是用于表示为作用域插槽的，只有加上这个使用作用域插槽才能使用到动态的数据，即完整写法应为。还有一个方法就是使用。
el-upload 手动上传
03-08
### 实现 `el-upload` 组件的手动触发文件上传功能 当使用 `el-upload` 组件时，通过设置属性 `auto-upload="false"` 可以阻止自动上传行为[^1]。这使得开发者能够控制何时启动文件上传过程。 为了实现手动触发上传，在模板部分定义按钮用于提交操作： ```html <template> <div> <!-- 文件选择器 --> <el-upload ref="upload" action="" :auto-upload="false" :file-list="fileList"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload> <!-- 提交按钮 --> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </div> </template> ``` 在脚本部分编写逻辑来处理点击事件以及实际发起HTTP请求的过程： ```javascript <script> export default { data() { return { fileList: [] // 存储已选中的文件列表 }; }, methods: { submitUpload() { this.$refs.upload.submit(); // 调用组件实例的方法完成上传动作 } } }; </script> ``` 上述代码片段展示了如何配置 `el-upload` 来支持手动触发上传流程，并且提供了简单的UI交互设计。需要注意的是，由于关闭了自动化机制(`auto-upload=false`)，因此需要额外提供一个按钮让用户主动触发展示或隐藏的上传行为。 对于更复杂的场景比如批量上传或是自定义上传方式，则可以考虑利用 `http-request` 自定义上传方法 或者结合 WebSocket 进行数据传输[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值