vue3+ts+vite+ElementPlus上传进度条实时更新(UPLoad和progress)。

需求:

上传文件时,展示进度条实时更新:

下面是代码片段:

  <!-- 添加媒体弹窗 -- 上传 --><el-dialog v-model="centerDialogVisible" title="媒体信息" width="700" :close-on-click-modal="false"><el-form><el-form-item><span><el-upload class="upload-demo" ref="upLoadRef" :limit="1" multiple drag:http-request="(file: any) => uploadFille(file)" :headers="headers" action="#" :on-success="handleSuccess"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><template #tip><div class="el-upload__tip">图片最大支持20M,视屏最大支持4G,音频最大支持20M,文档最大支持20M,超出大小将不会进行上传.</div></template></el-upload><el-progress :percentage="uploadPercentage"></el-progress></span></el-form-item></el-form></el-dialog>
  • :http-request="(file: any) => uploadFille(file)":自定义文件上传请求的处理函数
  • :headers="headers":设置上传请求的头部信息。
  • :limit="1":限制最多上传一个文件。
  • action="#":设置上传请求的 URL,这里使用 # 作为占位符,实际上传逻辑在 http-request 中处理。
  • :on-success:上传文件成功时候的函数

JavaScript:

这里本来是封装好的请求方法,但是因为进度条问题,只能换成另一种写法。如果伙伴们用原来的这种方法搭配其他可以更新进度条的方法也可以实现实时更新。

原来的:

const uploadFille = ({ file }: any) => {if (file) {try {let formData: any = new FormData()formData.append('file', file)addMedia(formData).then((res: any) => {if (res.code !== 200) return ElMessage.error('上传失败,' + res.msg)handleSuccess()})console.log(formData.get('files'))} catch (error) {console.log(error)}}
}

 修改后的:

const uploadPercentage = ref(0)
//上传 -- 加进度条实时更新
const uploadFille = async ({ file }: any) => {if (file) {try {let formData: any = new FormData()formData.append('file', file)await axios.post(baseURL, formData, {// 更新进度条的函数onUploadProgress: (event: any) => {uploadPercentage.value = Math.floor((event.loaded * 100) / event.total);},headers: {'Content-Type': 'multipart/form-data','Authorization': 'Bearer ' + getToken(),'clientid': import.meta.env.VITE_APP_CLIENT_ID},})} catch (error) {console.log(error)}}uploadPercentage.value = 100;
}// 上传成功事件
const handleSuccess = () => {if( uploadPercentage.value!==100) uploadPercentage.value = 100;ElMessage.success('上传成功')searchMediaHan()
}

到这里我发现了一个不足之处,那就是传不同的文件,有时候上传成功之后,进度条会不到100%就会停止,所以根据代码顺序最后加上 : uploadPercentage.value = 100;

结语:

到这里就结束了,伙伴们还有什么方法,可以多多指教.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63210.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MSSQL2022的一个错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.16.0”提供程序

MSSQL2022导入Excel的一个错误&#xff1a;未在本地计算机上注册“Microsoft.ACE.OLEDB.16.0”提供程序 一、导入情况二、问题发现三、问题解决 最近在安装新版SQLServer SSMS 2022后&#xff0c;每次导入Excel都会出现错误提示&#xff1a;未在本地计算机上注册“Microsoft.AC…

优傲协作机器人 Remote TCP Toolpath URCap(操作记录)

目录 一、新机设置项 1、设置管理员密码 2、设置安全密码 3、设置负载 二、激活 Remote TCP & Toolpath URCap 1、插入U盘 2、打开激活面板 3、导入许可证 4、查看是否激活成功 5、启用功能 三、使用流程&#xff08;官方&#xff09; 步骤一 步骤二 步骤三 …

【日常记录-Java】查看Maven本地仓库的位置

1. 简介 Maven本地仓库主要用于存储和管理项目所需的依赖项&#xff0c;如jar包、pom文件等。默认情况下&#xff0c;其位于用户家目录下的.m2/repository文件夹内。开发者也可以在Maven的配置文件settings.xml中修改本地仓库路径。 2. 方法 2.1 查看settings.xml文件 Maven本…

kafka 配置消息编码格式、解决消费者中文乱码

序列化 kafka 发送消息需要把key 和value 进行序列化处理 一般配置字符串方式&#xff0c;如果消息量大需要优化成其他方式。 代码配置 props.put("key.serializer", "org.apache.kafka.common.serialization.StringSerializer"); props.put("val…

Apache Commons Chain 与 Spring Boot 整合:构建用户注册处理链

文章目录 概述1. 环境准备2. 创建自定义上下文3. 创建命令验证用户输入保存用户数据发送欢迎邮件 4. 构建并执行处理链5. 使用处理链6. 运行结果7. 总结 概述 本文档旨在展示如何在 Spring Boot 应用中使用 Apache Commons Chain 来实现一个用户注册的处理链。我们将通过 Chai…

电子商务人工智能指南 2/6 - 需求预测和库存管理

介绍 81% 的零售业高管表示&#xff0c; AI 至少在其组织中发挥了中等至完全的作用。然而&#xff0c;78% 的受访零售业高管表示&#xff0c;很难跟上不断发展的 AI 格局。 近年来&#xff0c;电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…

OpenAI 推出了 Canvas 和 SearchGPT

今天的故事从 ChatGPT 推出的 Canvas 和 SearchGPT 开始。 ©作者|Ninja Geek 来源|神州问学 ChatGPT 在最近推出了令人兴奋的 Canvas 功能&#xff0c;Canvas 不仅带来了 ChatGPT 界面上的变化&#xff0c;还完全改变了人们撰写文档和书写代码的体验&#xff01; Canvas…

VMware虚拟机与国产操作系统安装及学习

今日任务&#xff1a; 虚拟化技术----操作系统的应用 非常重要的技术-----云计算技术的兴起-----云技术的核心就是虚拟化 传统计算-----&#xff08;《世纪之战》主演&#xff1a;刘青云 《暗算》主演&#xff1a;柳云龙 《功勋》 从算盘的演变到计算器----计算机----&#xff…

C# 中LINQ的详细介绍

文章目录 前言一、 LINQ 的基本概念二、查询语法与方法语法三、LINQ 的投影操作四、LINQ 的排序操作五、LINQ 的过滤操作六、LINQ 的分组操作七、LINQ 的连接操作八、LINQ 的聚合操作九、LINQ 的延迟执行十、LINQ 的错误处理十一、LINQ 的合并操作十二、LINQ 的自定义对象查询十…

Observability:用 OpenTelemetry 自动检测 Python 应用程序

作者&#xff1a;来自 Elastic Bahubali Shetti 了解如何使用 OpenTelemetry 自动检测 Python 应用程序。使用 Docker 文件中的标准命令&#xff0c;可以快速检测应用程序&#xff0c;而无需在多个位置编写代码&#xff0c;从而实现快速更改、扩展和更轻松的管理。 更多阅读&a…

利用tablesaw库简化表格数据分析

tableaw是处理表格数据的优秀工具。它提供了一组强大而灵活的功能&#xff0c;使操作、分析和可视化数据表变得容易。在这篇博文中&#xff0c;我们将介绍tableaw的主要特性、如何使用这些特性&#xff0c;以及如何使用tableaw处理表格数据的一些示例。 tablesaw简介 tableaw…

通过精密时间协议(PTP)对计算机网络中的多个设备进行时间同步

PTP 模块 - 使用教程 目录 PTP 模块 - 使用教程简介第 1 步&#xff1a;为主时钟创建一个 PTP 时钟实例第 2 步&#xff1a;添加 PTP 端口第 3 步&#xff1a;查询 PTP 时钟或 PTP 端口的状态第 4 步&#xff1a;清除 FAULTY 状态第 5 步&#xff1a;为 PTP 事件安装处理程序第…

【深度学习】利用Java DL4J 训练金融投资组合模型

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c=1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,高并发设计,Springboot和微服务,熟悉Linux,ESXI虚拟化以及云原生Docker和K8s…

支持向量机算法:原理、实现与应用

摘要&#xff1a; 本文深入探讨支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;算法&#xff0c;详细阐述其原理、数学模型、核函数机制以及在分类和回归问题中的应用方式。通过以 Python 和 C# 为例&#xff0c;展示 SVM 算法在不同编程环境下的具体…

STM32编码器接口及编码器测速模板代码

编码器是什么&#xff1f; 编码器是一种将角位移或者角速度转换成一连串电数字脉冲的旋转式传感 器&#xff0c;我们可以通过编码器测量到底位移或者速度信息。编码器从输出数据类型上 分&#xff0c;可以分为增量式编码器和绝对式编码器。 从编码器检测原理上来分&#xff0…

TCP连接过程中涉及到的状态转换

TCP连接过程中涉及到的状态转换 TCP 服务器和客户端都要有一定的数据结构来保存这个连接的信息。 在这个数据结构中其中就有一个属性叫做 “状态” 操作系统内核根据状态的不同&#xff0c;决定了当前应该干什么。(不会迷茫也不会混乱) LISTEN LISTEN状态&#xff0c;表示服务…

COCO数据集理解

COCO&#xff08;Common Objects in Context&#xff09;数据集是一个用于计算机视觉研究的广泛使用的数据集&#xff0c;特别是在物体检测、分割和图像标注等任务中。COCO数据集由微软研究院开发&#xff0c;其主要特点包括&#xff1a; 丰富的标签&#xff1a;COCO数据集包含…

github仓库自动同步到gitee

Github Actions是Github推出的自动化CI/CD的功能&#xff0c;我们将使用Github Actions让Github仓库同步到Gitee 同步的原理是利用 SSH 公私钥配对的方式拉取 Github 仓库的代码并推送到 Gitee 仓库中&#xff0c;所以我们需要以下几个步骤 生成 SSH 公私钥添加公钥添加私钥配…

【六足机器人】03步态算法

温馨提示&#xff1a;此部分内容需要较强的数学能力&#xff0c;包括但不限于矩阵运算、坐标变换、数学几何。 一、数学知识 1.1 正逆运动学&#xff08;几何法&#xff09; 逆运动学解算函数 // 逆运动学-->计算出三个角度 void inverse_caculate(double x, double y, …

Netty面试内容整理-编码实战相关问题

在 Netty 面试中,编码实战相关的问题会考察你的动手能力,具体包括 Netty 框架的使用、如何设计网络协议、如何处理一些常见的实际开发问题等。以下是一些常见的编码实战相关面试问题及要点: 如何实现一个简单的 Netty Echo 服务器? 一个 Echo 服务器是 Netty 编码的经典示例…