el-upload解决无法二次上传问题

最新推荐文章于 2024-03-09 11:38:00 发布
最新推荐文章于 2024-03-09 11:38:00 发布
阅读量4.7k 收藏 8
点赞数 1
分类专栏： vue element-ui 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_123456___/article/details/128701100
版权 
el-upload在使用的时候会出现一个问题：第一次上传完成以后，再次点击上传的时候，无法成功上传文件
页面上显示的还是第一次上传的文件
这是因为上传的时候，浏览器把上传的文件保存了，第二次上传的时候没有清空第一次的文件

解决方案：手动清空第一次上传的文件

  • html部分，定义一个要用获取dom的ref
<el-upload
  ref="targetUpload"
  class="upload-demo"
  action="#"
  :http-request="uploadFile"
  :limit="1"
  :show-file-list="false"
>
</el-upload>
  • js部分
this.$refs.targetUpload.clearFiles()

在需要的时候调用clearFiles方法，就可以实现二次上传了

hjt_未来可期
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue解决upload组件第二次上传无反应
OnlyJally的博客
01-03 3717
父级页面为编辑页面调用该组件，在点击编辑按钮后上传附件，第一次上传成功，提交后在其他行再次点击编辑按钮，调用该组件，则显示上传失败。为方便更多页面调用该组件进行附件上传。
vue+axios+el-upload实现文件上传（带参数）：
01-03
本次使用http-request自定义文件上传： 上传头像 备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(params) { // 可以在上传之前就行文件类型和大小处理 var formData = new FormData(); formData.append('annex', params.file);
element-ui 中 使用＜el-upload＞＜/el-upload＞组件，第二次点击上传无反应
最新发布
Missbelover的博客
03-09 968
【代码】element-ui 中 使用组件，第二次点击上传无反应。
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue结合el-upload实现腾讯云视频上传功能
11-20
起因 根据需求要实现一个视频上传功能，之前采用七牛云上传，小点视频没问题，大体积视频比如600M左右，再考虑到网速等其他原因就会花费半个小时左右。 后来分析到不仅要考虑上传时间的问题，更重要的是要考虑用户使用4G 网络的情况，考虑用户的流量，线上的视频，不能不做压缩转码，就放到页面上，视频不是图片，不能甩到 cdn 上就行了。 要考虑视频大小，pc 移动端适配，转码，还有防盗版等问题。 最终决定使用腾讯云上传视频，我的项目是web端上传，参考以下链接 官网链接：cloud.tencent.com/document/product/266/9239#.E6.96.AD.E7.82.B9.
elementUI upload 上传 传参
weixin_30684743的博客
08-24 750
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" mult...
el-upload 二次上传没有反应，clearFiles不起作用
qq_40334370的博客
04-11 2610
el-upload 二次上传没有反应，clearFiles不起作用
(实战-改bug)element ui Upload组件 上传一次后，再次点击上传 没反应
m0_67066313的博客
10-08 2182
日常改bug，减少出错率
element-plus：el-upload上传文件只能一次，第二次失效
彭世瑜的博客
12-10 4239
以下是官方文档给出的解决示例。来定义超出限制时的行为。，就无法进行第二次上传。
el-upload标签文件一次提交多次重复上传无反应问题
m0_67098662的博客
06-06 1528
el-upload标签文件一次提交多次重复上传无反应问题解决方案
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能，需要的朋友可以参考下
el-upload自定义上传方法
热门推荐
累兰羽的博客
11-15 3万+
el-upload自定义上传的坑 :http-request 指令的使用 使用该指令， :on-success, :on-error 指令是不会触发的 &lt;el-form-item label="logo" prop="logo"&gt; &lt;el-upload class="upload-demo" ref="upload" ...
elementui上传组件el-upload无法第二次上传问题
weixin_47372236的博客
06-09 8998
无需上传服务器的文件取消或者再次上传时失效的问题 <el-upload class="upload-demo" ref="upload" drag action="" :limit="1" accept=".csv" :show-file-list="false" :before-upload="onClickCsvBeforeupload"> <i class="el-icon-upload"></i> &
el-upload实现只上传一个文件且再次上传会覆盖前面的文件
AreYouOkLei的博客
09-05 7181
el-upload实现只上传一个文件且再次上传会覆盖前面的文件
Element UI Upload 上传文件只能上传一次 ，再次点击上传后无反应的问题
m0_48259951的博客
01-18 7220
Element UI Upload 上传文件上传文件一次 ，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。 方法一：利用 :on-success ref=‘upload’ :on-success=“handleSuccess” 注意： ref='upload 一定要加上ref 不然不起作用 <el-upload class="upload-demo"
element UI Upload limit 限制 上传文件，第二次后无法上传的坑
wenfu814的博客
04-25 5138
主要原因是第一次上传文件后，浏览器还保存着我们已经上传的文件，所以要想继续上传文件，就需要在on-success钩子函数中r通过ef 拿到它的document元素进行清除已经上传的文件 <el-upload class="upload-demo" ref="upload" :action="url" :headers="headers"
element-ui el-upload 成功上传第一张图片，第二张图片上传成功但是不显示
荼蘼_的博客
07-14 2103
element-ui el-upload 成功上传第一张图片，第二张图片上传成功但是不显示，需要整个刷新页面才会显示出来。 原因：可能取了浏览器缓存图片。 解决办法："https://www.img/imgPath/imgName.jpg?random="+Math.random(); 解释：Math.random();是随机数，会在图片后边加上随机数显示，这样每次名称都不一样，就不会存在找到缓存图片的问题了 ...
el-upload实现只上传一个文件且再次上传不会覆盖前面的文件的问题
weixin_40565812的博客
08-08 6097
1.el-upload实现只上传一个文件且再次上传不会覆盖前面的文件的问题 2.Cannot set properties of undefined (setting 'status')
el-upload二次封装
09-12
对于el-upload的二次封装，你可以按照以下步骤进行： 1. 创建一个新的组件，例如UploadWrapper.vue。 2. 在UploadWrapper.vue中引入el-upload组件： ```javascript <template> <el-upload></el-upload> </template> <script> import { Upload } from 'element-ui'; export default { components: { 'el-upload': Upload }, } </script> ``` 3. 在UploadWrapper.vue中，将el-upload的props和事件传递给封装组件： ```javascript <template> <el-upload :action="action" :headers="headers" :data="data" :file-list="fileList" :multiple="multiple" :before-upload="beforeUpload" :on-success="onSuccess" :on-remove="onRemove" ></el-upload> </template> <script> // ... export default { // ... props: { action: String, headers: Object, data: Object, fileList: Array, multiple: Boolean }, methods: { beforeUpload(file) { this.$emit('before-upload', file); }, onSuccess(response, file, fileList) { this.$emit('on-success', response, file, fileList); }, onRemove(file, fileList) { this.$emit('on-remove', file, fileList); } } } </script> ``` 4. 在父组件中使用封装组件UploadWrapper.vue： ```javascript <template> <upload-wrapper :action="action" :headers="headers" :data="data" :file-list="fileList" :multiple="multiple" @before-upload="beforeUpload" @on-success="onSuccess" @on-remove="onRemove" ></upload-wrapper> </template> <script> import UploadWrapper from './UploadWrapper.vue' export default { components: { 'upload-wrapper': UploadWrapper }, data() { return { action: 'your-action-url', headers: { // headers配置 }, data: { // 请求携带的额外参数 }, fileList: [], // 文件列表 multiple: true // 是否支持多选 } }, methods: { beforeUpload(file) { // 文件上传前的操作 }, onSuccess(response, file, fileList) { // 文件上传成功的操作 }, onRemove(file, fileList) { // 文件移除的操作 } } } </script> ``` 这样，你就完成了el-upload的二次封装。在父组件中，通过props传入el-upload的配置项和事件，并在UploadWrapper组件中进行处理和触发相应的事件。同时可以根据需要自定义一些额外的功能和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值