首先，确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装：
npm install vant
# 或者
yarn add vant
然后，在你的 Vue 项目中，可以这样使用 Vant Uploader 组件：
<template>
<div>
<van-uploader
v-model="fileList"
action="https://your-upload-api" <!-- 设置上传地址 -->
:max-count="3" <!-- 设置最大上传数量 -->
accept="image/*" <!-- 设置允许上传的文件类型 -->
/>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [], // 上传文件的列表
};
},
};
</script>
<style>
/* 在这里可以添加样式 */
</style>
在这个例子中，我们使用了 <van-uploader> 组件，并通过 v-model 绑定了上传文件的列表。用户可以通过点击上传按钮选择文件，并将文件添加到 fileList 列表中。上传的文件将会被发送到 action 属性指定的后端接口。
你可以通过设置其他属性来进行定制，比如 max-size 属性用于设置上传文件的最大尺寸，before-upload 属性用于在上传之前执行一些逻辑等。
<van-uploader
v-model="fileList"
action="https://your-upload-api"
:max-count="3"
accept="image/*"
:max-size="5 * 1024 * 1024" <!-- 设置最大上传文件大小为5MB -->
:before-upload="beforeUpload"
/>
在这个例子中，我们通过 max-size 属性设置了上传文件的最大大小为5MB，并通过 before-upload 属性设置了一个回调函数 beforeUpload，该函数在上传之前执行。
请确保在你的项目中正确引入了 Vant UI 组件库，并按照文档中的方式进行配置。这只是一个简单的例子，你可以根据实际需求进一步配置和定制 Vant Uploader 组件。
转载请注明出处：http://www.zyzy.cn/article/detail/5667/Vant