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>

效果如下：