Vue 上传图片裁剪

裁剪使用的是vue-cropper。
效果图如下：

裁剪组件弹框

<template>
  <div class="image-cropper-modal">
    <el-dialog
      :visible="visible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :title="$t('common.cropImage')"
      width="700"
      class="image-cropper-dialog"
      @close="visible = false"
    >
      <vue-cropper
        ref="imageCropper"
        :img="url"
        :auto-crop-width="autoCropWidth"
        :auto-crop-height="autoCropHeight"
        :auto-crop="true"
        :fixed="false"
        :fixed-number="[1, 1]"
        :fixed-box="true"
        :output-size="1"
        output-type="png"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button v-t="'common.cancel'" class="common-btn cancel" @click="onCancel" />
          <el-button v-t="'common.save'" class="common-btn confirm" type="primary" @click="onConfirm" />
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper';
export default {
  name: 'ImageCropperModal',
  components: {
    VueCropper,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: '',
    },
    autoCropWidth: {
      type: String,
      default: `${104 * 4}`,
    },
    autoCropHeight: {
      type: String,
      default: `${104 * 4}`,
    },
  },
  methods: {
    onCancel() {
      this.$emit('cancel');
    },
    onConfirm() {
      this.$refs.imageCropper.getCropBlob((blob) => {
        this.$emit('confirm', blob);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.image-cropper-dialog {
  .vue-cropper {
    height: 500px;
  }
}
</style>

使用

<image-cropper-modal
  :visible="cropperVisible"
  :url="file"
  :auto-crop-width="autoCropWidth"
  :auto-crop-height="autoCropHeight"
  @cancel="cropperVisible = false"
  @confirm="onConfirm"
/>

上传图片之后，进行转换、裁剪

async onUpload() {
  const fileReader = new FileReader();
  fileReader.readAsDataURL(files[0]);
  fileReader.onload = () => {
    this.file = fileReader.result;
    this.cropperVisible = true;
  };
},
async onConfirm(file) {
  file.name = this.files[0].name;
  await this.uploadFiles([file]);
  this.cropperVisible = false;
},