文件上传添加loading显示

最新推荐文章于 2026-05-02 08:06:17 发布

原创最新推荐文章于 2026-05-02 08:06:17 发布 · 1.3w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#文件上传添加loading

收录于

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Element UI中实现文件上传按钮的加载动画效果。通过使用v-loading.fullscreen.lock指令并配合数据属性loading的控制，实现了上传过程中的全屏加载指示。文章还强调了在上传成功后关闭loading动画的重要性。

一个比较小的东西不是很麻烦在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转圈圈的图标是不会关掉的那么就做不来其他的操作了
如下：
我这个地方判断比较多点