vant4 使用vue-cropper移动端头像上传 示例代码

Vant 4 是基于 Vue 的一套移动端轻量级 UI 组件库，而 vue-cropper 是一个用于裁剪图片的组件。如果你想在 Vant 4 中实现移动端头像上传并使用 vue-cropper 进行裁剪，首先需要安装这两个依赖：

npm install vant vant-image-crop @vue/cli-plugin-vuex

然后在项目里引入组件，并在适当的地方使用它：

<template>
  <van-cell v-if="cropping" title="裁剪">
    <van-image-crop :src="currentImage" :preview-src="currentImage" :output-width="100" :output-height="100"></van-image-crop>
    <van-button slot="actions" @click="finishCrop">确定</van-button>
  </van-cell>
</template>

<script>
import { VanCell, VanImageCrop } from 'vant';
export default {
  components: {
    VanCell,
    VanImageCrop
  },
  data() {
    return {
      cropping: false,
      currentImage: null // 用户选中的原始图片 URL 或者文件路径
    };
  },
  methods: {
    pickAvatar() {
      this.$van.camera.open().then((res) => {
        if (res.type === 'image') {
          this.currentImage = res.path;
          this.cropping = true; // 开始裁剪
        }
      });
    },
    finishCrop() {
      // 当用户点击确定时，处理裁剪后的图片
      // 这里可以将裁剪结果上传至服务器或者保存到本地
      console.log('Cropped image:', this.currentImage);
      this.cropping = false;
    }
  }
};
</script>

在这个例子中，`pickAvatar` 方法打开相机选择照片，`finishCrop` 方法则是在用户完成裁剪后触发，处理裁剪后的图片。记得根据实际需求替换 `console.log` 和后续的上传逻辑。