移动端vant Uploader 文件上传

Vant Uploader 是 Vant UI 库中的一个组件，它提供了一种简单易用的方式来处理移动端设备上的文件上传功能。这个组件支持图片、视频以及各种类型的文件选择，并且通常与 Vue.js 结合使用，可以轻松地集成到您的项目中。

在使用 Vant Uploader 的步骤如下：

1. 首先，在你的 Vue 项目中安装 vant-uploader 组件：

   npm install vant-uploader --save

2. 引入组件并添加到需要上传的元素上，如表单或按钮：

   <van-upload ref="uploader" :url="uploadUrl" :multiple="true" action-type="native">
     <!-- 图片预览 -->
     <img v-if="file.url" :src="file.url" />
     <!-- 没有选择文件时显示的提示 -->
     <div v-else>请选择文件</div>
   </van-upload>

3. 在 Vue 实例中设置上传相关的配置，比如 URL 和事件处理器：

   export default {
     data() {
       return {
         uploadUrl: 'your-api-url', // 服务器接收文件的URL
       };
     },
     methods: {
       handleUpload(file) {
         this.$refs.uploader.submit(file);
       }
     }
   }

4. 当用户选择文件后，`handleUpload` 方法会被调用，然后你可以根据需要处理上传后的响应。