vxe-upload vue 实现附件上传、手动批量上传附件的方式

查看官网：https://vxeui.com

安装

npm install vxe-pc-ui@4.6.47

// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...createApp(App).use(VxeUIAll).mount('#app')
// ...

上传附件支持失败重新上传

自定义重新上传，通过参数 show-error-status 启用，当上传失败时，可以点击重新上传按钮

在这里插入图片描述

<template><div><vxe-upload v-model="fileList" multiple :limit-count="6" :limit-size="50" show-progress show-error-status auto-hidden-button :upload-method="uploadMethod"></vxe-upload></div>
</template><script setup>
import { ref } from 'vue'
import axios from 'axios'const fileList = ref([])// 后端接口模拟请求失败
const uploadMethod = ({ file, updateProgress }) => {const formData = new FormData()formData.append('file', file)return axios.post('/api/pub/upload/single?randomError=1', formData, {onUploadProgress (progressEvent) {const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))updateProgress(percentCompleted)}}).then((res) => {return {...res.data}})
}
</script>

上传附件、手动批量上传

当需要手动批量提交上传时，可以通过 aotu-submit=false 关闭自动提交，然后手动调用 submit() 方法提交

在这里插入图片描述

<template><div><vxe-button status="primary" @click="submitEvent">点击手动上传</vxe-button><vxe-uploadmultipleshow-progressv-model="fileList"ref="refUpload"button-text="选择文件或拖拽到此":auto-submit="false":limit-count="9":limit-size="50":upload-method="uploadMethod"></vxe-upload></div>
</template><script setup>
import { ref } from 'vue'
import axios from 'axios'const refUpload = ref()
const fileList = ref([])const uploadMethod = ({ file, updateProgress }) => {const formData = new FormData()formData.append('file', file)return axios.post('/api/pub/upload/single', formData, {onUploadProgress (progressEvent) {const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))updateProgress(percentCompleted)}}).then((res) => {return {...res.data}})
}const submitEvent = () => {const $upload = refUpload.valueif ($upload) {$upload.submit()}
}
</script>

上传附件，可以单个点击上传、也可以批量上传

还可以通过 show-submit-button 显示上传按钮，单个提交或者手动提交单个。如果上传失败也可以通过 show-error-status 显示重新上传按钮

在这里插入图片描述

<template><div><vxe-button status="primary" @click="submitEvent">点击手动上传</vxe-button><vxe-uploadmultipleshow-progressshow-submit-buttonshow-error-statusv-model="fileList"ref="refUpload"button-text="选择文件或拖拽到此":auto-submit="false":limit-count="9":limit-size="50":upload-method="uploadMethod"></vxe-upload></div>
</template><script setup>
import { ref } from 'vue'
import axios from 'axios'const refUpload = ref()
const fileList = ref([])const uploadMethod = ({ file, updateProgress }) => {const formData = new FormData()formData.append('file', file)return axios.post('/api/pub/upload/single?randomError=1', formData, {onUploadProgress (progressEvent) {const percentCompleted = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 0))updateProgress(percentCompleted)}}).then((res) => {return {...res.data}})
}const submitEvent = () => {const $upload = refUpload.valueif ($upload) {$upload.submit(true)}
}
</script>