首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-uploader：
<template>
<div>
<van-uploader
v-model="fileList"
:max-count="5"
:max-size="10 * 1024 * 1024" <!-- 设置最大文件大小，单位为字节 -->
:preview-size="100"
:before-read="beforeRead"
@oversize="handleOversize"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Uploader } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Uploader.name]: Uploader,
},
setup() {
const fileList = ref([]);
const beforeRead = (file) => {
// 在这里处理文件上传前的逻辑
console.log('上传前的逻辑', file);
return true; // 返回 true 表示允许上传，返回 false 表示禁止上传
};
const handleOversize = (files, fileList) => {
// 在这里处理文件大小超出限制的逻辑
console.log('文件大小超出限制', files, fileList);
};
return {
fileList,
beforeRead,
handleOversize,
};
},
};
</script>
在上面的例子中，我们使用了 van-uploader 组件，并通过 v-model 指令将上传的文件列表与一个 Vue 变量 fileList 进行双向绑定。
我们设置了一些属性，如 max-count 表示最大上传数量，max-size 表示最大文件大小，单位为字节，preview-size 表示预览图的大小。
同时，我们监听了 before-read 事件，可以在这里处理文件上传前的逻辑，返回 true 表示允许上传，返回 false 表示禁止上传。另外，我们还监听了 oversize 事件，用于处理文件大小超出限制的逻辑。
你可以根据实际需求，进一步设置其他属性来满足你的需求。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5817/Vant