Vue2 | Vant uploader实现单个图片上传

在Vue2项目中使用Vant的Uploader组件来实现单个图片上传的基本步骤如下：

1. 安装Vant组件库：
首先需要在你的Vue项目中安装Vant组件库，可以使用npm或者yarn进行安装。

   npm install vant --save
   # 或者
   yarn add vant

2. 引入Uploader组件：
在Vue组件的`<script>`部分引入Uploader组件，并在`components`对象中注册。

   import { Uploader } from 'vant';

   export default {
     components: {
       [Uploader.name]: Uploader
     }
   }

3. 在模板中使用Uploader：
在Vue组件的`<template>`部分使用`<van-uploader>`标签来实现上传功能，并设置`action`属性为后端处理上传的接口地址，`result-type`属性设置为`text`以获取文本格式的响应结果，`after-read`属性为上传后的回调函数。

   <van-uploader
     v-model="file"
     action="你的图片上传接口地址"
     :before-read="beforeRead"
     @oversize="oversize"
     :result-type="text"
     @after-read="handleAfterRead"
   >
     <van-icon name="photograph" />
   </van-uploader>

4. 处理上传逻辑：
在Vue组件的`<script>`部分，定义`beforeRead`、`oversize`和`handleAfterRead`等函数来处理上传前、文件大小超限和上传成功后的逻辑。

   export default {
     data() {
       return {
         file: null,
       };
     },
     methods: {
       // 文件读取前的钩子函数
       beforeRead(file) {
         // 可以在这里进行文件大小检查
         // 如果文件大小超过限制，可以选择阻止读取
       },
       // 文件大小超限的回调函数
       oversize(file) {
         this.$message('文件大小超出限制');
       },
       // 文件读取完成后的回调函数
       handleAfterRead(file) {
         // 这里的file就是后端返回的数据，可以在这里处理上传后的逻辑，比如展示上传后的图片
         // 通常是将后端返回的图片地址赋值给某个数据属性，以便在模板中显示
         console.log(file);
       }
     }
   }

5. 使用获取到的图片地址：
在`handleAfterRead`方法中获取到的`file`对象中包含了后端返回的图片地址等信息，你可以根据需求使用这个地址来展示图片或者进行其他操作。