vant+vue-cropper-h5实现图片上传前裁剪

要实现的亚子：

image.png

image.png

image.png

废话不说，上代码，先封装一个公用组件

然后在其他页面引入组件，直接用

        
上传图片:
        
          
        

data() {
    return {
      avatarImage: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=319223871,3949806150&fm=26&gp=0.jpg",
      img1: '',
      img2: ''
    }
  },
methods:{
//获取头像url
    async getAvatarImageUrl1(file) {
      var formData = new FormData();
      formData.append('file', file); // 固定格式
      const res = await upload(formData)
      if (res) {
        this.img1 = (res.data[0])
        console.log(res);
      }
    },
    async getAvatarImageUrl2(file) {
      var formData = new FormData();
      formData.append('file', file); // 固定格式
      const res = await upload(formData)
      if (res) {
        this.img2 = (res.data[0])
        console.log(res);
      }
    },
}

::v-deep .titleImg {
  padding: 10px 0;
  .van-cell__value {
    display: flex;
  }
  .van-field__control {
    display: none;
  }
  ::v-deep .cropper-crop-box {
    width: 300px;
    height: 300px;
  }
}