Vxe UI vxe-upload 上传组件,显示进度条的方法

2024-06-01 07:36

本文主要是介绍Vxe UI vxe-upload 上传组件,显示进度条的方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vxe-upload 上传组件

查看官网 https://vxeui.com

显示进度条很简单,需要后台支持进度就可以了,后台实现逻辑具体可以百度,这里只介绍前端逻辑。

上传附件

相关参数说明,具体可以看文档:
multiple 是否允许多选
limit-count 数量限制
limit-size 大小限制,单位是 M
fileTypes 格式限制,数组,例如:[‘xlsx’, ‘pdf’, ‘docx’]

<template><div><vxe-upload v-model="imgList" :limit-count="6" :limit-size="50" multiple :upload-method="uploadMethod"></vxe-upload></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'const imgList = ref([])// 上传附件的方法
const uploadMethod = ({ file, updateProgress }) => {const formData = new FormData()formData.append('file', file)// 调用后台接口return axios.post('/demo/api/pub/upload/single', formData, {onUploadProgress (progressEvent) {// 进度监听事件,这里需要后端支持才能获取到对应的值,如果后台没实现对应的功能,这里获取不到进度值const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))// 获取到进度之后,调用 updateProgress() 方法更新进度,传一个百分比数字进去即可updateProgress(percentCompleted)}}).then((res) => {// 这里是附件上传到后台后,后台返回得分信息,比如 id、url 之类的,会自动赋值给对应的行return {...res.data}})
}
</script>

效果如下:

在这里插入图片描述

上传图片

imageTypes 格式限制,数组,例如:[‘png’, ‘jpg’, ‘gif’]

<template><div><vxe-upload v-model="imgList" mode="image" :limit-count="3" :limit-size="15" multiple :upload-method="uploadMethod"></vxe-upload></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'const imgList = ref([])// 上传附件的方法
const uploadMethod = ({ file, updateProgress }) => {const formData = new FormData()formData.append('file', file)// 调用后台接口return axios.post('/demo/api/pub/upload/single', formData, {onUploadProgress (progressEvent) {// 进度监听事件,这里需要后端支持才能获取到对应的值,如果后台没实现对应的功能,这里获取不到进度值const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))// 获取到进度之后,调用 updateProgress() 方法更新进度,传一个百分比数字进去即可updateProgress(percentCompleted)}}).then((res) => {// 这里是附件上传到后台后,后台返回得分信息,比如 id、url 之类的,会自动赋值给对应的行return {...res.data}})
}
</script>

效果如下:

在这里插入图片描述

这篇关于Vxe UI vxe-upload 上传组件,显示进度条的方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert