vant uploader组件点击图片上传,vant-uploader,vant 上传视频,vant上传照片没反应,vant上啦加载,vant 文档
Vant4 Uploader 是一个基于 Vue.js 框架的、用于实现文件上传功能的组件库。 它提供了多种文件上传方式，如拖拽上传、点击上传等，并且支持设置上传文件类型、大小限制，以及上传前、上传中、上传成功和上传失败等不同阶段的回调函数。

以下是一个使用 Vant4 Uploader 实现文件上传功能的例子：

html
<template>
<van-uploader
:url="uploadUrl"
:max-file-size="10 * 1024 * 1024"
:accept="accept"
:before-upload="beforeUpload"
:on-progress="onProgress"
:on-success="onSuccess"
:on-error="onError"
/>
</template>

<script>
export default {
data() {
return {
uploadUrl: 'https://example.com/upload', // 文件上传接口
accept: ['jpg', 'jpeg', 'png'], // 允许上传的文件类型
};
},
methods: {
beforeUpload(file) {
// 在上传之前对文件进行校验
if (file.size > 10 * 1024 * 1024) {
this.$toast('文件太大了');
return false;
}
return true;
},
onProgress(event, file, fileList) {
console.log('上传进度：', event.percent);
},
onSuccess(response, file, fileList) {
console.log('上传成功：', response);
},
onError(error, file, fileList) {
console.log('上传失败：', error);
},
},
};
</script>


在这个例子中，我们使用 van-uploader 组件实现文件上传功能，并传入了一些参数，如文件上传接口、允许上传的文件类型、上传前的校验函数、上传进度的回调函数、上传成功的回调函数、上传失败的回调函数等。在这些回调函数中，我们可以对文件上传过程中的各种情况进行处理，例如显示上传进度、提示上传结果等。