vue3+ElementPlus+VueCropper实现上传图片

前言

我们需要上传图片，然后弹框进行裁剪（放大、缩小）。

效果

实现

裁剪组件.vue

<template>
    <div>
        <!--裁剪图片-->
        <el-dialog v-model="tailorDialogVisible" @open="onTailorDialogOpen" @close="onTailorDialogCancel" title="编辑图片" width="680" align-center>
            <div style=" width: 550px; height: 450px; margin: 30px auto;" v-loading="loading"
                 element-loading-text="Loading...">
                <vue-cropper ref="cropper"
                             :img="tailorOption.img"
                             :output-type="tailorOption.outputType"
                             :full="tailorOption.full"
                             :auto-crop="tailorOption.autoCrop"
                             :auto-crop-width="tailorOption.autoCropWidth"
                             :auto-crop-height="tailorOption.autoCropHeight"
                             :center-box="tailorOption.centerBox"
                             :max-img-size="tailorOption.max"
                             mode="cover"
                             @imgLoad="onTailorLoad"
                ></vue-cropper>
            </div>
            <div style="display: flex; margin: 0 200px; justify-content: center; align-items: center">
                <div style="width: 40px;text-align: left; cursor: pointer;">
                    <!-- <el-icon @click="onScaleMinus(0.1)" :size="16"><Minus /></el-icon> -->
                    <span @click="onScaleMinus(0.1)">-号</span>
                </div>
                <div style="flex: 1">
                    <el-slider v-model="tailorAmplificationValue" :min="1" :max="3" :step="0.1" @change="onChangTailorAmplificationSlider" />
                </div>
                <div style="width: 40px;text-align: right; cursor: pointer;">