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

你可以使用第三方库vue-cropperjs实现自定义剪裁图片的功能。

首先，在你的Vue项目中安装vue-cropperjs：

npm install vue-cropperjs --save

然后在需要使用自定义剪裁图片的组件中引入vue-cropperjs：

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      cropperOptions: {
        viewMode: 1,
        dragMode: 'move',
        autoCrop: true,
        autoCropArea: 0.8,
        movable: true,
        zoomable: true,
        zoomOnTouch: true,
        zoomOnWheel: true,
        cropBoxMovable: true,
        cropBoxResizable: true,
        aspectRatio: 1,
        guides: true,
        center: true,
        highlight: true,
        background: true,
        crop: () => {
          // do something when cropping
        },
      },
      imgSrc: '',
    };
  },
  methods: {
    onFileChange(e) {
      const files = e.target.files;
      if (files && files.length > 0) {
        const reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = () => {
          this.imgSrc = reader.result;
        };
      }
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        // do something with cropped image blob
      });
    },
  },
};

在组件的模板中，你可以使用`<input type="file">`标签来选择图片，然后将图片的base64编码赋值给`imgSrc`。使用`<vue-cropper>`标签将图片显示在自定义剪裁组件中，然后可以在`cropImage`方法中获取剪裁后的图片数据。

<template>
  <div>
    <input type="file" @change="onFileChange">
    <vue-cropper ref="cropper" :options="cropperOptions" :src="imgSrc"></vue-cropper>
    <button @click="cropImage">Crop Image</button>
  </div>
</template>

以上代码仅为示例，你可以根据自己的需求调整`cropperOptions`中的参数来实现不同的功能。