当前位置: 首页 > news >正文

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;

结语:

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

相关文章:

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

需求&#xff1a; 上传文件时&#xff0c;展示进度条实时更新&#xff1a; 下面是代码片段: <!-- 添加媒体弹窗 -- 上传 --><el-dialog v-model"centerDialogVisible" title"媒体信息" width"700" :close-on-click-modal"false&qu…...

AspNet WebAPI 模型绑定问题

继承System.Web.Http.ApiController的Action的Model如果被[Serializable]定义&#xff0c;会导致Model的字段无法绑定。 Microsoft.AspNet.WebApi.Core.5.2.3\lib\net45\System.Web.Http.dll [Serializable] public class Model {public string id { get; set; } }public MyA…...

Android 图形系统之七:SurfaceFlinger

一. 引言 什么是 SurfaceFlinger&#xff1f;SurfaceFlinger 的核心作用和地位&#xff1f;为什么需要了解 SurfaceFlinger&#xff1f; 二. SurfaceFlinger 的基本概念 Surface 和 SurfaceFlinger 的关系SurfaceFlinger 与图形渲染&#xff08;OpenGL ES 和 Vulkan&#xf…...

14、鸿蒙学习——管理通知角标

针对未读的通知&#xff0c;系统提供了角标设置接口&#xff0c;将未读通知个数显示在桌面图标的右上角角标上。 通知增加时&#xff0c;角标上显示的未读通知个数需要增加。 通知被查看后&#xff0c;角标上显示的未读通知个数需要减少&#xff0c;没有未读通知时&#xff0…...

TongRDS分布式内存数据缓存中间件

命令 优势 支持高达10亿级的数据缓冲&#xff0c;内存优化管理&#xff0c;避免GC性能劣化。 高并发系统设计&#xff0c;可充分利用多CPU资源实现并行处理。 数据采用key-value多索引方式存储&#xff0c;字段类型和长度可配置。 支持多台服务并行运行&#xff0c;服务之间可互…...

[在线实验]-RabbitMQ镜像的下载与部署

镜像下载 docker的rabbitmq镜像资源-CSDN文库 加载镜像 docker load --input rabbitmq.tar 给镜像打标签 这里发现镜像名为none&#xff0c;需要给镜像重命名下 docker tag [镜像id] [新镜像名称]:[新镜像标签] docker tag ebaf409ffbe2 rabbitmq:management 运行镜像…...

Linux 系统文件描述符(File Descriptor)小白级介绍

1. 概述 Linux 遵循"一切皆文件"的理念。在 Linux 系统中&#xff0c;文件描述符是一个索引值&#xff08;非负整数&#xff09;&#xff0c;指向内核为每个进程所维护的该进程打开文件的记录表。 如上所述&#xff0c;每个进程都维护着一张文件描述符表。 文件描述…...

【Verilog】实验二 数据选择器的设计与vivado集成开发环境

目录 一、实验目的 二、实验环境 三、实验任务 四、实验原理 五、实验步骤 top.v mux2_1.v 一、实验目的 1. 掌握数据选择器的工作原理和逻辑功能。 2. 熟悉vivado集成开发环境。 3. 熟悉vivado中进行开发设计的流程。 二、实验环境 1. 装有vivado的计算机。 2. Sw…...

IDL学习笔记(三)OMI数据处理。hdf5文件读取,图像反转,GeoTiff区别,月季年均值计算提取输出,单位转换,运行时间计算

modis Level 2 grid 数据是全球格网化数据。一天的数据全在其中。 modis Level 1 和 2 数据是一景一景的影像。 IDL学习笔记&#xff08;三&#xff09;OMI数据处理 hdf5文件读取单位转换&#xff0c;输出hdf5数据集的图像&#xff0c;并检查图像经纬度是否正确&#xff0c;若错…...

深入浅出:PHP中的数据类型全解析

文章目录 引言理解数据类型标量类型整数 (integer)浮点数 (float)布尔值 (boolean)字符串 (string) 复合类型数组 (array)对象 (object)资源 (resource)NULL 特殊类型Callable强制类型转换 实战案例总结与展望参考资料 引言 在编程的世界里&#xff0c;数据类型是构建任何应用…...

要使用 OpenResty 创建一个接口,返回客户端的 IP 地址,并以 JSON 格式输出

要使用 OpenResty 创建一个接口&#xff0c;返回客户端的 IP 地址&#xff0c;并以 JSON 格式输出 要使用 OpenResty 创建一个接口&#xff0c;返回客户端的 IP 地址&#xff0c;并以 JSON 格式输出方案一解决方案&#xff08;openresty使用cjson&#xff09;说明&#xff1a;使…...

智慧油客:从初识、再识OceanBase,到全栈上线

今天&#xff0c;我们邀请了智慧油客的研发总监黄普友&#xff0c;为我们讲述智慧油客与 OceanBase 初识、熟悉和结缘的故事。 智慧油客自2016年诞生以来&#xff0c;秉持新零售的思维&#xff0c;成功从过去二十年间以“以销售产品为中心”的传统思维模式&#xff0c;转向“以…...

ClickHouse守护进程

背景描述 维护CK过程中&#xff0c;有时候会有CK OOM&#xff0c;并且CK自己没有自动拉起的情况出现&#xff1b;那么这个时候就需要守护进程&#xff0c;最初我不说了Supervisor来做守护进程&#xff0c;但是当我手动kill的时候发现并没有自动拉起。 解决方案 于是乎自己写…...

智能合约

06-智能合约 0 啥是智能合约&#xff1f; 定义 智能合约&#xff0c;又称加密合约&#xff0c;在一定条件下可直接控制数字货币或资产在各方之间转移的一种计算机程序。 角色 区块链网络可视为一个分布式存储服务&#xff0c;因为它存储了所有交易和智能合约的状态 智能合约还…...

SQL面试题——拼多多SQL面试题 求连续段的起始位置和结束位置

拼多多SQL面试题 求连续段的起始位置和结束位置 今天的题目来自拼多多,我们先看一下题目描述 有一张表ids记录了id,id不重复,但是会存在间断,求出连续段的开始位置和结束位置 +---+ | id| +---+ | 1| | 2| | 3| | 5| | 6| | 8| | 10| | 12| | 13| | 14| | 15| +--…...

玩《三角洲行动》遇到游戏运行故障是什么原因?游戏运行故障要怎么解决?预防游戏运行故障问题出现

《三角洲行动》游戏运行故障解析与解决方案&#xff1a;原因、解决与预防 在畅游《三角洲行动》这款充满挑战与激情的游戏时&#xff0c;玩家可能会遭遇各种游戏运行故障&#xff0c;如卡顿、闪退、无法启动等问题。我将结合自己丰富的经验和知识&#xff0c;为大家深入剖析《…...

基于灰色神经网络的订单需求预测

灰色神经网络&#xff08;Grey Neural Network, GNN&#xff09; 是将灰色系统理论与人工神经网络相结合的一种模型&#xff0c;旨在处理不完全信息和小样本问题。灰色神经网络利用灰色系统的预测优势和神经网络的学习能力&#xff0c;能够在信息不完整或数据不充分的情况下实现…...

记录学习《手动学习深度学习》这本书的笔记(三)

这两天看完了第六章&#xff1a;卷积神经网络&#xff0c;巧的是最近上的专业选修课刚讲完卷积神经网络&#xff0c;什么卷积层池化层听得云里雾里的&#xff0c;这一章正好帮我讲解了基础的知识。 第六章&#xff1a;卷积神经网络 6.1 从全连接层到卷积 在之前的学习中&…...

JS中递归函数的理解及展开运算符在递归种的运用理解

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>递归函数</title> </head> <body> <script>const list ["你好", "吃饭了吗",["好",[[&qu…...

人工智能学习用的电脑安装cuda、torch、conda等软件,版本的选择以及多版本切换

接触人工智能的学习三个月了&#xff0c;每天与各种安装包作斗争&#xff0c;缺少依赖包、版本高了、版本低了、不兼容了、系统做一半从头再来了。。。这些都是常态。三个月把单位几台电脑折腾了不下几十次安装&#xff0c;是时候总结一下踩过的坑和积累的经验了。 以一个典型的…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...