文件上传添加loading显示

最新推荐文章于 2024-05-13 14:56:54 发布
最新推荐文章于 2024-05-13 14:56:54 发布
阅读量1.2w 收藏 7
点赞数 3
分类专栏： 前端 文章标签： 文件上传添加loading
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hao9101111/article/details/83310735
版权

一个比较小的东西 不是很麻烦 在element-ui上面可以找到

<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-loading.fullscreen.lock="loading">{{$t('changeView.pay.uploadFiles')}}</el-button>

在你的上传文件的按钮上面添加 v-loading.fullscreen.lock=“loading”
然后在你的return里面定义一下loading = false
之后你需要在你的上传点击事件的地方 需要写上：
在这里插入图片描述
之后 还需要做一步 在你上传成功之后 需要把loading 给false掉 不然的话 这个loading转圈圈的图标是不会关掉的 那么就做不来其他的操作了
如下：
我这个地方判断比较多点

阿浩su
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【jQuery】实现文件上传和loading效果
早睡早起长头发的博客
01-17 742
上传
文件上传显示进度条功能源码
03-04
文件上传显示进度条功能在现代Web应用中是一个重要的用户体验元素，尤其是在处理大文件或批量上传时。这个功能允许用户在后台传输数据的同时看到一个可视化的进度指示器，从而提高交互性和用户满意度。在ASP.NET框架...
vue3+ts使用ElUpload上传（包含loading与重新上传）
最新发布
leng0920的博客
05-13 262
vue3+ts使用ElUpload上传（包含loading与重新上传）
Elementui中的上传组件添加Loading加载
qq_43364241的博客
09-15 8849
项目场景： 在 Elementui 的 upload 组件添加 loading 组件 解决方案： 1.添加标识控制 loading 的开关 2.在 upload 组件中添加代码 3.当上传方法成功或者失败的时候关闭 loading
el-upload typescript 多文件上传添加loading progress
silence_forever
02-01 3491
el-upload的单文件上传loading框很好做，如果涉及到单次要上传多个文件，产品同志又给你提bug说加载条怎么消失了的时候，改怎么优化自己的上传组件呢？ 标签 <el-upload ref="uploader" style="display:inline-block;" action :on-success="handleImportFinished" :on-progress="handleUploadProgress" :on-erro
el-upload的loading问题
qq_34821290的博客
04-13 2862
问题场景：el-upload上传功能，由于上传的文件可能较大，为避免重复操作，因此需要上传loading效果。解决：el-upload组件添加onChange该事件。
el-upload上传组件在vue中的应用和踩坑
晨的一朵云的博客
10-08 2945
需求：打开弹窗，点击按钮选择上传一个Excel文件，只能上传.xlsx格式文件，且不超过20M。 首先大致画出了界面，因为不需要显示已上传文件列表，所以就el-upload这个组件来说，省了不少麻烦事。dom部分直接上代码： <el-dialog title="导入" :visible.sync="uploadView" @close="uploadView = false"> <div class="dialog-wrap"> <!-- 上传 --&.
bootstrap fileinput实现文件上传功能
08-29
1. 首先，需要在 HTML 中添加一个文件上传控件，例如： ```html <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> ``` 2. 然后，需要在 JavaScript 中引入 Bootstrap ...
Bootstrap Fileinput文件上传组件用法详解
09-02
2. **上传成功和失败处理**：`success`和`error`回调函数可以用来处理文件上传后的响应，例如显示成功消息或错误提示。 3. **自定义模板**：你可以根据需要自定义文件列表的显示模板，以适应不同场景的需求。 4. *...
Bootstrap fileinput文件上传组件使用详解
08-30
这个事件将在文件上传完成后触发，可以在这里添加文件上传完成后的处理逻辑，例如将上传的文件信息存储到数据库中。 Bootstrap fileinput文件上传组件提供了一个灵活且强大的文件上传解决方案，能够满足大多数的...
element-ui upload组件多文件上传的示例代码
12-29
之前有一篇写的如何同时传递form表单及upload组件文件，如果有多个upload文件该如何传递呢 上代码 html <el-form-item prop=expS
基于elementui开发上传组件，实现文件上传loading列表
qq_38814363的博客
12-19 1617
基于elementui开发上传组件，实现文件上传loading列表
【ElementUI加载loading状态】
limuzhixing的博客
09-02 1131
ElementUI加载loading状态
el-input 含验证规则的输入框输入内容后显示转圈图标el-icon-loading原因以及解决
XiaoChi2020的博客
06-23 1360
el-input 含验证规则的输入框输入内容后显示转圈图标el-icon-loading原因以及解决
el-upload多文件上传进度条实现（非原生真实进度）
qq_30907143的博客
07-21 1011
el-upload自定义上传 当前已上传文件占总文件的百分比
element如何实现input输入与下拉滚动加载效果
baidu_41601048的博客
09-27 1320
需求如图： 第一个想到的是利用input的自定义模板+远程搜索来实现。也就是借助这个组件： <el-autocomplete></el-autocomplete>但发现在做滚动加载的时候不好实现。后来把目标瞄向了select组件。看到网上有实例，通过一个一个自定义指令判断是否滚动到顶部。然后再做加载。经过尝试发现可以解决问题： step1： 写一个自定义指令：（我的实例中该自定义指令放在main.js同级目录下）directives.js import Vue fr.
element el-upload组件before-upload及on-success回调传递额外参数
dujyong的博客
10-25 3209
element el-upload组件before-upload及on-success回调传递额外参数 html： <el-upload v-loading="加载状态" name="文件参数名" :action="上传请求地址" :headers="请求头额外参数" :before-upload=" (res) => { return beforeUpload(res, '额外参数'); }
Vue实现文件上传和oss上传（带进度条和取消上传功能）和拖拽后点击按钮上传（加loading效果）
牛先森家的博客
11-05 4183
Vue实现文件上传（带进度条和取消上传功能） 代码实现 这里我只写了单一文件上传的demo，并且只限制了文件大小不能超过5M。如果想限制上传的文件类型，可自行在input标签中进行设置，如果想要实现多个文件一起上传，先要设置input标签属性multiple=“multiple”，然后利用循环将每一个文件数据存入到formData中，最后作为参数传给服务端进行处理。 因为个人习惯原因，我先对axios进行了封装，创建service.js文件，代码如下： import axios from "axios";
antdesign vue2 文件上传loading时加前端虚拟进度
06-09
对于 antdesign vue2 文件上传组件，可以通过监听上传进度事件来实现前端虚拟进度的效果。具体操作如下： 1. 在上传组件中添加 onProgress 属性，并绑定一个方法来处理上传进度事件： ```html <Upload action="/api/upload" onProgress="handleProgress" > <Button>上传文件</Button> </Upload> ``` 2. 在组件的 methods 中定义 handleProgress 方法，并计算当前上传进度： ```js methods: { handleProgress(event, file, fileList) { // 计算上传进度 const percent = (event.loaded / event.total) * 100; // 更新进度条 this.$refs.progress.update(percent); } } ``` 3. 在组件中添加一个进度条组件，并引用它的实例： ```html <template> <div> <Upload action="/api/upload" onProgress="handleProgress" > <Button>上传文件</Button> </Upload> <Progress ref="progress" /> </div> </template> <script> import { Upload, Button, Progress } from 'ant-design-vue'; export default { components: { Upload, Button, Progress }, methods: { handleProgress(event, file, fileList) { // 计算上传进度 const percent = (event.loaded / event.total) * 100; // 更新进度条 this.$refs.progress.update(percent); } } }; </script> ``` 这样，当文件上传的过程中，进度条会随着上传进度变化而实时更新，实现了前端虚拟进度的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值