本文主要是介绍Vxe UI vxe-upload vue上传组件,显示进度条的方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
vxe-upload vue 上传组件
查看官网 https://vxeui.com
显示进度条很简单,需要后台支持进度就可以了,后台实现逻辑具体可以百度,这里只介绍前端逻辑。
vue 上传附件
相关参数说明,具体可以看文档:
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 vue上传组件,显示进度条的方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!