首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Uploader组件：
<template>
<div>
<van-uploader
v-model="fileList"
:max-count="5"
:max-size="10 * 1024 * 1024"
:preview-image="previewImage"
:before-read="beforeRead"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Uploader } from 'vant';
export default {
components: {
[Uploader.name]: Uploader,
},
setup() {
const fileList = ref([]);
const previewImage = (file, index) => {
// 点击预览图片时的操作
console.log('预览图片', file, index);
};
const beforeRead = (file, detail) => {
// 文件上传前的操作
console.log('上传前', file, detail);
// 返回 false 可阻止文件上传
return true;
};
return {
fileList,
previewImage,
beforeRead,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的fileList变量，用于存储用户上传的文件列表。然后，我们在模板中使用<van-uploader>标签引入了Vant3的Uploader组件，并通过v-model将fileList与上传的文件列表进行绑定。
通过上述设置，用户可以点击上传按钮选择文件进行上传，fileList变量会自动更新，从而获取用户选择的文件列表。在模板中我们通过:max-count和:max-size属性设置文件的最大数量和最大尺寸。通过:preview-image属性设置点击预览图片时的回调函数，通过:before-read属性设置文件上传前的回调函数。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5732/Vant