vue2 vue-cropper 上传头像

Vue2中，你可以使用`vue-cropperjs`这个插件来实现图片裁剪功能，包括上传头像。`vue-cropperjs`是一个轻量级的HTML5图片裁剪库，它能够方便地将用户选择的图片进行裁剪，并提供了一些常见的选项和事件处理。

要在Vue项目中集成`vue-cropperjs`，你需要先安装插件：

npm install vue-cropperjs

然后，在组件中引入并使用它：

<template>
  <div>
    <input type="file" @change="selectImage" />
    <cropper ref="cropper" :src="croppedImage" :options="cropperOptions" @crop-end="onCropEnd"></cropper>
    <button @click="uploadAvatar">上传</button>
  </div>
</template>

<script>
import Cropper from 'vue-cropperjs';

export default {
  components: {
    Cropper,
  },
  data() {
    return {
      croppedImage: '',
      cropperOptions: {
        aspectRatio: 1,
        guides: false,
        center Guides: true,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
      },
    };
  },
  methods: {
    selectImage(e) {
      this.$refs.cropper.src = URL.createObjectURL(e.target.files[0]);
    },
    onCropEnd(e) {
      this.croppedImage = e.detail.url;
    },
    uploadAvatar() {
      // 这里可以调用实际的上传接口，或者触发一个自定义事件上传文件
      console.log('即将上传', this.croppedImage);
    },
  },
};
</script>

在这个例子中，用户可以选择图片，然后通过`onCropEnd`事件获取裁剪后的图片URL，最后点击“上传”按钮时可以处理上传逻辑。