data中需要定義的變數

            logoUrl: '', // 裁剪後的圖片
            // 裁剪元件是否展示
            dialogVisible: false,
            // 裁剪元件的基礎配置option
            option: {
                img: '', // 裁剪圖片的地址
                info: true, // 裁剪框的大小資訊
                outputSize: 0.8, // 裁剪生成圖片的質量
                outputType: 'png', //
 
 裁剪生成圖片的格式
                canScale: false, // 圖片是否允許滾輪縮放
                autoCrop: true, // 是否預設生成截圖框
                autoCropWidth: 180, // 預設生成截圖框寬度
                autoCropHeight: 64, // 預設生成截圖框高度
                fixedBox: true, // 固定截圖框大小 不允許改變
                fixed: true, // 是否開啟截圖框寬高固定比例
                fixedNumber: [180, 64], //
 
 截圖框的寬高比例
                full: true, // 是否輸出原圖比例的截圖
                canMoveBox: false, // 截圖框能否拖動
                original: false, // 上傳圖片按照原始比例渲染
                centerBox: false, // 截圖框是否被限制在圖片裡面
                infoTrue: true // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
            },     

首先放一個上傳圖片的圖示，用elementUI元件的upload

<el-upload
    class="avatarUploader"
    :auto-upload="false"
    action=""
    :show-file-list="false"
    :on-change='changeUpload'>
    <img v-if="logoUrl" :src="logoUrl" class="avatar">
    <i v-else class="el-icon-plus"></i>
</el-upload>

注意：auto-upload一定要設定成false, logoUrl代表裁剪後展示的圖片，本例只可上傳一張圖片，如需多張自己調整

使用npm 安裝VueCropper，並在頁面的js部分引入

import Vue from 'vue'
import VueCropper from 'vue-cropper'
// 裁剪圖片
Vue.use(VueCropper)

html部分

 <!-- vueCropper 剪裁圖片實現-->
        <el-dialog title="圖片剪裁" :visible.sync="dialogVisible" append-to-body>
            <div class="cropper-content">
                <div class="cropper" style="text-align:center">
                    <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :outputSize="option.outputSize"
                        :outputType="option.outputType"
                        :info="true"    
                        :full="option.full"
                        :autoCropHeight="option.autoCropHeight"
                        :autoCropWidth="option.autoCropWidth"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :original="option.original"
                        :autoCrop="option.autoCrop"
                        :fixed="option.fixed"
                        :fixedNumber="option.fixedNumber"
                        :centerBox="option.centerBox"
                        :infoTrue="option.infoTrue"
                        :fixedBox="option.fixedBox"
                    ></vueCropper>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <div class="rowJe">
                    <div @click="dialogVisible = false" class="cancelBtn">取 消</div>
                    <div type="primary" @click="finish" :loading="loading" class="ensureBtn">確認</div>
                </div>
                
            </div>
        </el-dialog>

使用el-upload 上傳圖片後彈出裁剪頁面

// 上傳按鈕   限制圖片大小
        changeUpload(file, fileList) {
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                alert('上傳圖片不能超過2M')
                return false
            }
            this.cutImgFile = file.raw
            this.fileinfo = file
            // console.log("file",file,fileList)

            // 上傳成功後將圖片地址賦值給裁剪框顯示圖片
            this.$nextTick(() => {
                this.option.img = URL.createObjectURL(file.raw)
                this.dialogVisible = true
                // console.log("圖片地址：",this.option.img)
            })
        },

裁剪完成觸發的方法

// 點選裁剪，這一步是可以拿到處理後的地址
        finish() {
            this.$refs.cropper.getCropBlob((data) => {
                // data 是裁剪後的檔案資料，需轉成後端需要的格式請求上傳介面
                const file = new window.File([data],this.cutImgFile.name)
                var formData = new FormData();
                formData.append("file", file);
                // uplodeImgInstitution 封裝的後端介面，
                uplodeImgInstitution(formData).then((res) => {
                    if (res.resultCode == 200) {
                        console.log("圖片上傳成功：",res)
                        this.logoUrl = res.data
                        this.dialogVisible = false
                        this.editInfo()
                    } else {
                        alert('上傳圖片失敗')
                    }
                });
            })
        }