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

vxe-upload vue 实现附件上传、手动批量上传附件的方式
查看官网：https://vxeui.com
gitbub：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui
安装

1. npm install vxe-pc-ui@4.6.47

复制代码

1. // ...
2. import VxeUIAll from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. // ...
6. createApp(App).use(VxeUIAll).mount('#app')
7. // ...

复制代码

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

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

1. <template>
2.   
3.     <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>
4.   
5. </template>

复制代码

上传附件、手动批量上传

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

1.       点击手动上传<template>
2.   
3.     <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>
4.   
5. </template>  

复制代码

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

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

1.       点击手动上传<template>
2.   
3.     <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>
4.   
5. </template>  

复制代码

https://gitee.com/x-extends/vxe-pc-ui

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除