vue3 vantUi4 上传图片功能

Vue3 和 Vant UI 4 提供了方便的上传图片功能。Vant UI 的 `van-image` 组件可以用于显示和选择图片，而 `van-file-uploader` 或者 `van-upload` 组件则可以帮助处理文件上传操作。以下是使用这两个组件的基本步骤：

1. 首先，安装所需依赖：

   npm install vant vant-upload --save

2. 引入所需的库并注册组件：

   import { VanImage, VanFileUploader } from 'vant';
   import 'vant/lib/index.css'; // 如果没自动导入样式

   Vue.use(VanImage);
   Vue.component('van-file-uploader', VanFileUploader);

3. 在模板中添加上传组件和相应的事件监听：

   <template>
     <div>
       <van-image v-model="image" @change="onImageChange"></van-image>
       <van-file-uploader :before-upload="beforeUpload"
                         :accept="'.jpg, .jpeg, .png'"
                         :limit="1"
                         :multiple="false"
                         @success="handleSuccess"
                         @error="handleError">
         <button slot="trigger">选择图片</button>
       </van-file-uploader>
     </div>
   </template>

4. 定义数据和方法：

   data() {
     return {
       image: null,
     };
   },
   
   methods: {
     onImageChange(e) {
       this.image = e.file;
     },
     beforeUpload(file) {
       // 可选：这里可以对文件进行预检查，如大小限制等
     },
     handleSuccess(res) {
       console.log('上传成功', res);
       // 这里可以根据服务器返回的数据处理上传后的图片路径
     },
     handleError(err) {
       console.error('上传失败', err);
     },
   }