vxe-upload vue 实现附件上传、手动批量上传附件的方式
<p>vxe-upload vue 实现附件上传、手动批量上传附件的方式</p><p>查看官网：https://vxeui.com<br>
gitbub：https://github.com/x-extends/vxe-pc-ui<br>
gitee：https://gitee.com/x-extends/vxe-pc-ui</p>
<h2 id="安装">安装</h2>
<pre><code>npm install vxe-pc-ui@4.6.47
</code></pre>
<pre><code class="language-javascript">// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...
createApp(App).use(VxeUIAll).mount('#app')
// ...
</code></pre>
<h2 id="上传附件支持失败重新上传">上传附件支持失败重新上传</h2>
<p>自定义重新上传，通过参数 show-error-status 启用，当上传失败时，可以点击重新上传按钮</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202507/3563285-20250704165656883-223475471.gif"></p>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="上传附件手动批量上传">上传附件、手动批量上传</h2>
<p>当需要手动批量提交上传时，可以通过 aotu-submit=false 关闭自动提交，然后手动调用 submit() 方法提交</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202507/3563285-20250704165708941-2065415160.gif"></p>
<pre><code class="language-html"><template>
<div>
<vxe-button status="primary" @click="submitEvent">点击手动上传</vxe-button>
<vxe-upload
multiple
show-progress
v-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.value
if ($upload) {
$upload.submit()
}
}
</script>
</code></pre>
<h2 id="上传附件可以单个点击上传也可以批量上传">上传附件，可以单个点击上传、也可以批量上传</h2>
<p>还可以通过 show-submit-button 显示上传按钮，单个提交或者手动提交单个。如果上传失败也可以通过 show-error-status 显示重新上传按钮</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202507/3563285-20250704165717693-1522399935.gif"></p>
<pre><code class="language-html"><template>
<div>
<vxe-button status="primary" @click="submitEvent">点击手动上传</vxe-button>
<vxe-upload
multiple
show-progress
show-submit-button
show-error-status
v-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.value
if ($upload) {
$upload.submit(true)
}
}
</script>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/18965961
頁:
[1]