vue vant-ui使用van-uploader实现头像图片上传

好的，以下是使用Vant-UI的van-uploader组件实现头像图片上传的代码示例：

1. 首先，安装vant-ui和axios：

npm install vant axios --save

2. 在Vue项目中引入Vant-UI和axios：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import axios from 'axios';

Vue.use(Vant);
Vue.prototype.$axios = axios;

3. 在Vue组件中使用van-uploader组件：

<template>
  <van-uploader
    :disabled="uploadDisable"
    :before-read="beforeRead"
    :after-read="afterRead"
    :preview-options="{closeable: true}"
    :max-count="1"
    accept="image/*"
    :value="avatarUrl"
    :deletable="deletable"
    :show-upload="false"
  >
    <img v-if="avatarUrl" :src="avatarUrl" class="avatar"/>
    <div v-else class="avatar-placeholder"></div>
  </van-uploader>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: '', // 上传成功后图片的地址
      deletable: true, // 是否可删除已上传的图片
      uploadDisable: false, // 是否禁用上传功能
    }
  },
  methods: {
    beforeRead(file) {
      // 上传前的处理逻辑，如判断图片大小、类型等
      // 返回false阻止上传，返回true执行上传操作
      return true;
    },
    afterRead(file) {
      // 上传成功后的处理逻辑
      // file对象包含上传成功后的图片信息
      // file.url即为上传成功后的图片地址
      this.avatarUrl = file.url;
    },
  },
}
</script>

<style>
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 10px;
}
.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #f5f5f5;
}
</style>

以上代码中，van-uploader组件的各个属性含义如下：

- :disabled：是否禁用上传功能；
- :before-read：上传前的处理逻辑，返回false阻止上传，返回true执行上传操作；
- :after-read：上传成功后的处理逻辑，file对象包含上传成功后的图片信息，file.url即为上传成功后的图片地址；
- :preview-options：图片预览的配置项，如是否可关闭等；
- :max-count：上传图片数量的最大值；
- accept：限制上传图片的类型；
- :value：上传成功后图片的地址；
- :deletable：是否可删除已上传的图片；
- :show-upload：是否显示上传按钮。

在实现头像上传时，我们只需将:before-read和:after-read方法中的上传逻辑改为上传头像即可。同时，需要在组件中定义avatarUrl变量，用于保存上传成功后的头像地址，并在van-uploader组件中的:value属性和<img>标签中的:src属性中使用该变量，实现上传成功后的头像预览效果。