Vxe UI 上传组件 vxe-upload 全局配置上传方法,显示上传进度,最完美的配置方案
正常使用上传组件 vxe-upload,都是在用的时候传自定义上传方法,然后进行处理。几个页面是没什么问题,当系统页面非常多的时候,就不好维护了,每个地方都写接口。由于系统是统一的上传附件接口,这时就可以利用全局参数实现统一管理上传逻辑。
这样配置完之后在 vxe-table 或者 vxe-from 中使用就会变得极致简单了,完美配置。
全局默认参数
// main.js
import { VxeUI } from 'vxe-pc-ui'
import axios from 'axios'
VxeUI.setConfig({
upload: {
// 封装统一的上传逻辑
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) => {
// { url: '' }
return {
...res.data
}
})
},
// 封装统一的删除逻辑
// removeMethod ({ option }) {},
// 封装统一的下载逻辑
// downloadMethod ({ option }) {},
// 封装统一的预览逻辑
// previewMethod ({ option }) {}
}
})
表单使用
<template>
<div>
<vxe-form v-bind="formOptions" >
<template #name="{ data }">
<vxe-input v-model="data.name"></vxe-input>
</template>
<template #fileList1="{ data }">
<vxe-upload v-model="data.fileList1"></vxe-upload>
</template>
<template #fileList2="{ data }">
<vxe-upload v-model="data.fileList2" multiple></vxe-upload>
</template>
<template #imgList1="{ data }">
<vxe-upload v-model="data.imgList1" mode="image"></vxe-upload>
</template>
<template #imgList2="{ data }">
<vxe-upload v-model="data.imgList2" mode="image" multiple></vxe-upload>
</template>
<template #action>
<vxe-button type="reset">重置</vxe-button>
<vxe-button type="submit" status="primary">提交</vxe-button>
</template>
</vxe-form>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const formOptions = reactive({
titleWidth: 120,
data: {
name: 'test1',
nickname: 'Testing',
sex: '',
fileList1: [],
fileList2: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
],
imgList1: [],
imgList2: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
]
},
items: [
{ field: 'name', title: '名称', span: 24, itemRender: {}, slots: { default: 'name' } },
{ field: 'fileList1', title: '上传附件', span: 24, itemRender: {}, slots: { default: 'fileList1' } },
{ field: 'fileList2', title: '上传附件多选', span: 24, itemRender: {}, slots: { default: 'fileList2' } },
{ field: 'imgList1', title: '上传图片', span: 24, itemRender: {}, slots: { default: 'imgList1' } },
{ field: 'imgList2', title: '上传图片多选', span: 24, itemRender: {}, slots: { default: 'imgList2' } },
{ align: 'center', span: 24, slots: { default: 'action' } }
]
})
</script>
表格使用
<template>
<div>
<vxe-table
border
show-overflow
:data="tableData">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="name" title="Name" min-width="180"></vxe-column>
<vxe-column field="fileList1" title="附件列表" width="240">
<template #default="{ row }">
<vxe-upload v-model="row.fileList1" progress-text="{percent}%" :more-config="{maxCount: 1, layout: 'horizontal'}" readonly></vxe-upload>
</template>
</vxe-column>
<vxe-column field="fileList2" title="上传附件" width="300">
<template #default="{ row }">
<vxe-upload v-model="row.fileList2" progress-text="{percent}%" :more-config="{maxCount: 1, layout: 'horizontal'}" :show-button-text="false" multiple></vxe-upload>
</template>
</vxe-column>
<vxe-column field="imgList1" title="图片列表" width="160">
<template #default="{ row }">
<vxe-upload v-model="row.imgList1" mode="image" progress-text="{percent}%" :more-config="{maxCount: 1}" :image-style="{width: 40, height: 40}" :show-button-text="false" readonly></vxe-upload>
</template>
</vxe-column>
<vxe-column field="imgList2" title="上传图片" width="210">
<template #default="{ row }">
<vxe-upload v-model="row.imgList2" mode="image" progress-text="{percent}%" :more-config="{maxCount: 1}" :image-style="{width: 40,height: 40}" :show-button-text="false" multiple></vxe-upload>
</template>
</vxe-column>
</vxe-table>
</div>
</template>
<script setup>
import { ref } from 'vue'
const tableData = ref([
{
id: 10001,
name: 'Test1',
imgList1: [],
imgList2: [],
fileList1: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
],
fileList2: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
]
},
{
id: 10002,
name: 'Test2',
imgList1: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
{ name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
],
imgList2: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
{ name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
],
fileList1: [],
fileList2: []
},
{
id: 10003,
name: 'Test3',
imgList1: [
{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
],
imgList2: [
{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
],
fileList1: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
{ name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
{ name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
],
fileList2: [
{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
{ name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
{ name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
]
}
])
</script>
以上全局配置完,使用就无需再重复写上传方法了。
https://github.com/x-extends/vxe-pc-ui
https://gitee.com/x-extends/vxe-pc-ui