vue 头像预览功能

Vue.js 实现头像预览功能可以结合使用`vue-image-preview`组件和`vue-cropperjs`组件来实现。`vue-image-preview`用于预览头像，`vue-cropperjs`用于剪裁头像。

下面是一个基本的使用示例：

1. 安装`vue-image-preview`和`vue-cropperjs`组件：

   npm install vue-image-preview vue-cropperjs --save

2. 在Vue.js应用程序的入口文件中引入`vue-image-preview`和`vue-cropperjs`组件：

   import Vue from 'vue'
   import VueImagePreview from 'vue-image-preview'
   import VueCropper from 'vue-cropperjs'
   import 'vue-image-preview/dist/vue-image-preview.css'
   import 'cropperjs/dist/cropper.css'

   Vue.use(VueImagePreview)
   Vue.component('VueCropper', VueCropper)

3. 在需要预览和剪裁头像的组件中使用`vue-image-preview`和`vue-cropperjs`组件：

   <template>
     <div>
       <img :src="imageUrl" @click="showPreview">
       <vue-cropper :img="imageUrl" ref="cropper" :guides="true"></vue-cropper>
     </div>
   </template>

   <script>
   import VueCropper from 'vue-cropperjs'

   export default {
     data() {
       return {
         imageUrl: 'https://example.com/avatar.jpg'
       }
     },
     methods: {
       showPreview() {
         this.$preview.show({
           images: [{ src: this.imageUrl }]
         })
       },
       cropAvatar() {
         const canvas = this.$refs.cropper.getCroppedCanvas()
         const croppedImage = canvas.toDataURL('image/jpeg')
         // 将剪裁后的头像上传到服务器
       }
     },
     components: {
       VueCropper
     }
   }
   </script>

在这个示例中，我们在点击头像时调用了`showPreview()`方法，该方法使用了`vue-image-preview`组件的预览功能，并传入了需要预览的头像路径。同时，我们还在组件中使用了`vue-cropperjs`组件，在预览头像时可以对头像进行剪裁操作，剪裁后的头像可以通过`toDataURL()`方法获取到。

需要注意的是，在使用`vue-cropperjs`组件时，需要在组件中添加`ref`属性，以便在剪裁头像时获取到组件的实例。同时，在剪裁头像后，可以将剪裁后的头像上传到服务器。