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

你可以使用第三方的图片上传组件，例如 `vue-upload-component`，然后在上传成功后，使用另一个第三方的图片剪裁组件（例如 `vue-cropper`）来进行剪裁。

首先，你需要安装这两个组件：

npm install vue-upload-component vue-cropper

然后，你可以使用 `vue-upload-component` 来实现图片上传功能。在上传成功后，你可以将上传成功的图片 URL 传递给 `vue-cropper` 组件，让用户进行剪裁。

以下是一个简单的示例代码：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      accept="image/*"
      @input-filter="inputFilter"
      @uploaded="uploaded"
    ></vue-upload-component>
    <vue-cropper
      v-if="showCropper"
      ref="cropper"
      :src="cropperSrc"
      :guides="false"
      :view-mode="2"
      :auto-crop-area="1"
      :canvas-color="'#fff'"
      :background="'#000'"
      :min-container-width="400"
      :min-container-height="400"
      :info="false"
      @crop-end="cropEnd"
    ></vue-cropper>
  </div>
</template>

<script>
import VueUploadComponent from "vue-upload-component";
import VueCropper from "vue-cropper";

export default {
  components: {
    VueUploadComponent,
    VueCropper,
  },
  data() {
    return {
      showCropper: false,
      cropperSrc: null,
    };
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        if (/\.(gif|jpg|jpeg|png)$/i.test(newFile.name)) {
          return true;
        }
        prevent();
        this.$refs.upload.clear();
        alert("Please choose an image file.");
      }
    },
    uploaded(response) {
      if (response.success) {
        this.cropperSrc = response.data.url;
        this.showCropper = true;
      } else {
        alert(response.message);
      }
    },
    cropEnd(croppedImage) {
      // 处理剪裁后的图片
      console.log(croppedImage);
    },
  },
};
</script>

在这个示例中，我们首先使用 `vue-upload-component` 来实现图片上传功能，当上传成功后，我们将上传成功后的图片 URL 传递给 `vue-cropper` 组件，并显示出来。当用户完成剪裁后，我们可以通过 `crop-end` 事件来获取剪裁后的图片数据，然后进行处理。

当然，这只是一个简单的示例，具体的实现方式还需要根据你的具体需求进行调整。