用vue2实现上传图片前裁剪组件

要实现上传图片前裁剪组件，可以使用一些现有的 Vue.js 图片裁剪库，如 vue-cropper。

下面是一个简单的实现步骤：

1. 安装 vue-cropper 库：`npm install vue-cropper`

2. 在 Vue 组件中引入并注册 vue-cropper：

import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  // ...
}

3. 在模板中使用 vue-cropper 组件：

<template>
  <div>
    <vue-cropper ref="cropper" :src="imageUrl" :output-type="'jpeg'" :view-mode="1" :auto-crop="true"></vue-cropper>
    <button @click="handleCrop">裁剪</button>
    <input type="file" @change="handleFileSelect">
  </div>
</template>

其中，`imageUrl` 是图片的 URL 地址，`handleFileSelect` 方法用于选择图片文件并将其转化为 URL。

4. 实现 `handleFileSelect` 方法：

methods: {
  handleFileSelect (event) {
    const file = event.target.files[0]
    const reader = new FileReader()
    reader.onload = (event) => {
      this.imageUrl = event.target.result
    }
    reader.readAsDataURL(file)
  },
}

这个方法用于将选择的图片文件转化为 URL，并赋值给 `imageUrl`。

5. 实现 `handleCrop` 方法：

methods: {
  handleCrop () {
    this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
      // 在这里可以将裁剪后的图片上传到服务器
      console.log(blob)
    })
  },
}

这个方法用于获取裁剪后的图片，将其转化为 Blob 对象，并进行上传操作。

至此，上传图片前裁剪组件的实现就完成了。当然，还可以对这个组件进行一些样式和功能的定制化，以满足具体的需求。