如何使用vue-cropper.js上传裁剪过的图片？

npm install vue-cropper --save
# 或者
yarn add vue-cropper

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <vue-cropper
      ref="cropper"
      :src="imageUrl"
      :aspect-ratio="1"
      :auto-crop="true"
      :view-mode="1"
      :background="true"
      :guides="true"
      :crop-box-resizable="true"
      :crop-box-movable="true"
      :drag-mode="'move'"
      style="width: 100%; height: 400px;"
    />
    <button @click="cropImage">Crop and Upload</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageUrl: null,
    };
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.imageUrl = event.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append('file', blob, 'cropped-image.png');

        // 发送 POST 请求上传图片
        fetch('YOUR_UPLOAD_URL', {
          method: 'POST',
          body: formData,
        })
          .then((response) => response.json())
          .then((data) => {
            console.log('Upload success:', data);
          })
          .catch((error) => {
            console.error('Upload error:', error);
          });
      });
    },
  },
};
</script>

<style>
/* 你可以根据需要添加样式 */
</style>