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>

效果如下：