vue 上传图片自定义剪裁怎么弄

Vue 上传图片自定义剪裁可以使用一些第三方库来实现，比如 `vue-cropperjs` 和 `vue-clipper` 等。

下面以 `vue-cropperjs` 为例进行讲解：

1. 安装 `vue-cropperjs`

npm install vue-cropperjs --save

2. 在 Vue 组件中引入并使用 `vue-cropperjs`

<template>
  <div>
    <input type="file" @change="onFileChange">
    <div v-if="cropperVisible">
      <vue-cropper
        ref="cropper"
        :src="cropperImg"
        :guides="false"
        :view-mode="1"
        :drag-mode="cropType"
        :toggle-drag-mode-on-dblclick="false"
        :background="false"
        :cropbox-movable="true"
        :cropbox-resizable="true"
        :crop="onCrop"
        :ready="onCropperReady"
        :zoom="onZoom"
      ></vue-cropper>
      <button @click="onCropBtnClick">确定</button>
      <button @click="onCancelBtnClick">取消</button>
    </div>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'

export default {
  components: {
    VueCropper
  },
  data () {
    return {
      cropperVisible: false,
      cropperImg: '',
      cropType: 'crop',
      cropper: null
    }
  },
  methods: {
    onFileChange (e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.cropperImg = reader.result
        this.cropperVisible = true
      }
    },
    onCropperReady (cropper) {
      this.cropper = cropper
    },
    onCropBtnClick () {
      const dataUrl = this.cropper.getCroppedCanvas().toDataURL()
      // TODO: 将裁剪后的图片上传到服务器
      this.cropperVisible = false
    },
    onCancelBtnClick () {
      this.cropperVisible = false
    },
    onCrop (event) {
      console.log('onCrop', event)
    },
    onZoom (event) {
      console.log('onZoom', event)
    }
  }
}
</script>

以上代码中，我们首先使用 `input` 标签来选择图片文件，并将其读入到 `cropperImg` 变量中。然后，当 `cropperVisible` 变量为 `true` 时，显示 `vue-cropper` 组件，并在其上方加上“确定”和“取消”按钮。在点击“确定”按钮时，我们可以调用 `getCroppedCanvas` 方法来获取裁剪后的图片，并将其上传到服务器。在点击“取消”按钮时，隐藏 `vue-cropper` 组件。

其中，`onCropperReady`、`onCrop` 和 `onZoom` 等方法是 `vue-cropper` 组件的事件回调函数，可以根据需要自行处理。此外，还可以使用一些其他的选项来自定义 `vue-cropper` 组件，具体可以参考 `vue-cropperjs` 的官方文档。