在Vue3中实现图片上传并且使用cropperjs进行图片的裁剪

在Vue3中实现图片上传并使用cropperjs进行图片裁剪，可以通过以下步骤实现：

1. 安装依赖

首先需要安装`axios`、`cropperjs`和`vue-cropperjs`：

npm install axios cropperjs vue-cropperjs --save

2. 创建上传组件

在Vue3中创建一个上传组件，包括一个上传按钮、一个图片预览区域和一个裁剪框。

<template>
  <div class="upload">
    <div class="upload-btn">
      <label for="file-upload">上传图片</label>
      <input type="file" id="file-upload" accept="image/*" @change="selectImage($event)" />
    </div>
    <div class="preview">
      <img ref="image" :src="imageUrl" />
      <vue-cropper ref="cropper" v-if="showCropper"></vue-cropper>
    </div>
    <div class="actions">
      <button v-if="showCropper" @click="cropImage">裁剪</button>
      <button v-else @click="startUpload" :disabled="!imageUrl">上传</button>
      <button v-if="showCropper" @click="cancelCrop">取消</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Cropper from 'cropperjs';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageUrl: '',
      showCropper: false,
      cropper: null,
      file: null,
    };
  },
  methods: {
    // 选择图片
    selectImage(event) {
      this.file = event.target.files[0];
      this.imageUrl = URL.createObjectURL(this.file);
      this.showCropper = true;
      this.$nextTick(() => {
        this.initCropper();
      });
    },
    // 初始化裁剪器
    initCropper() {
      this.cropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        aspectRatio: 1,
        autoCropArea: 1,
        crop: () => {
          // 裁剪框触发crop事件时，更新裁剪框数据
          const data = this.cropper.getData();
          this.$emit('update:cropData', data);
        },
      });
    },
    // 取消裁剪
    cancelCrop() {
      this.showCropper = false;
      this.file = null;
      this.imageUrl = '';
      this.$refs.cropper.reset();
      this.$refs.image.removeAttribute('src');
      this.$refs.image.removeAttribute('style');
      this.cropper.destroy();
      this.cropper = null;
      this.$emit('cancel');
    },
    // 裁剪图片
    cropImage() {
      const canvas = this.cropper.getCroppedCanvas();
      const croppedImage = canvas.toDataURL('image/jpeg', 0.7);
      this.imageUrl = croppedImage;
      this.showCropper = false;
      this.file = this.dataURLtoFile(croppedImage, 'cropped.jpg');
      this.$emit('update:file', this.file);
    },
    // 文件转换
    dataURLtoFile(dataurl, filename) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    // 开始上传
    startUpload() {
      const formData = new FormData();
      formData.append('file', this.file);
      axios.post('/upload', formData).then(() => {
        this.$emit('uploadSuccess');
      });
    },
  },
};
</script>

3. 通过props传递裁剪框数据

在父组件中使用上传组件，并通过props传递裁剪框数据：

<template>
  <div class="app">
    <upload
      v-model:file="file"
      @uploadSuccess="uploadSuccess"
      @cancel="cancelUpload"
      :cropData="cropData"
      @update:cropData="cropData = $event"
    ></upload>
  </div>
</template>

<script>
import Upload from './components/Upload.vue';

export default {
  components: {
    Upload,
  },
  data() {
    return {
      file: null,
      cropData: {},
    };
  },
  methods: {
    // 上传成功回调
    uploadSuccess() {
      console.log('上传成功');
    },
    // 取消上传回调
    cancelUpload() {
      console.log('取消上传');
    },
  },
};
</script>

4. 在父组件中处理裁剪框数据

在父组件中，通过监听`update:cropData`事件，获取裁剪框数据，并传递给上传组件：

<template>
  <div class="app">
    <upload
      v-model:file="file"
      @uploadSuccess="uploadSuccess"
      @cancel="cancelUpload"
      :cropData="cropData"
      @update:cropData="cropData = $event"
    ></upload>
  </div>
</template>

<script>
import Upload from './components/Upload.vue';

export default {
  components: {
    Upload,
  },
  data() {
    return {
      file: null,
      cropData: {},
    };
  },
  methods: {
    // 上传成功回调
    uploadSuccess() {
      console.log('上传成功');
    },
    // 取消上传回调
    cancelUpload() {
      console.log('取消上传');
    },
  },
};
</script>

通过以上四个步骤，在Vue3中就可以实现图片上传并使用cropperjs进行图片裁剪了。