<el-upload 
    accept="image/jpeg, image/gif, image/png, image/jpg" 
    ref='upload'           
    :action="uploadAction"          //上傳方法，
    :auto-upload="false"            //是否自動(dòng)上傳文件。這里需要false
    :headers="uploadHeaders"     
    :limit="1" 
    :show-file-list="false"         //上傳顯示的列表
    :on-change="onChange"           //選擇文件或上傳文件成功或上傳文件失敗時(shí)的鉤子功能
    >
    <el-button type="default">選擇圖片</el-button>
 </el-upload>

// 選擇本地圖片
        onChange(file, fileList) {
            this.$nextTick(() => {
                this.option.img = URL.createObjectURL(file.raw);
                this.$refs.upload.clearFiles();
                this.dialogVisibleImgs = true; // 控制顯示彈框
            })
        },

<el-dialog class="cropperDialog" 
        :close-on-click-modal="false" 
        title="圖片裁剪" 
        :visible.sync="dialogVisibleImgs"
        width="40%" 
        @close="close"
        >
            <div class="cropper-content" v-if="option.img">
                <div class="cropper" style="text-align: center;">
                    <vueCropper     
                        ref="cropper" 
                        :img="option.img" 
                        :output-size="option.size" 
                        :output-type="option.outputType"
                        :info="true" 
                        :full="option.full" 
                        :fixed="option.fixed" 
                        :fixed-number="option.fixedNumber"
                        :can-move="option.canMove" 
                        :can-move-box="option.canMoveBox" 
                        :fixed-box="option.fixedBox"
                        :original="option.original"      //上傳圖片按照原始比例渲染 原圖裁切大小的需寫這個(gè)
                        :auto-crop="option.autoCrop" 
                        :auto-crop-width="option.autoCropWidth"  // 默認(rèn)生成裁圖框?qū)挾?原圖裁切大小的需寫這個(gè)" 
                        :auto-crop-height="option.autoCropHeight"  //     默認(rèn)生成裁圖框高度 原圖裁切大小的需寫這個(gè)
                        :center-box="option.centerBox" 
                        :high="option.high"
                        model="cover" 
                        :max-img-size="option.max" 
                        :info-true="option.infoTrue" 
                        @realTime="realTime"    //實(shí)時(shí)預(yù)覽函數(shù)
                        >
                    </vueCropper>
                </div>
            </div>
            <div class="dialogbottom" style="display: flex; align-items: center; justify-content: space-between;">
                <div class="preview">
                    <!-- 這里傳入封裝的裁切比例 -->
                    <div class="title">封面預(yù)覽 圖片比例（{{ fixedNum[0] }}:{{fixedNum[1]}}）</div>
                    <div class="preview_clumk">
                        <img :src="previewImageHeight" alt="" style="width:90px;"
                            object-fit="contain">
                    </div>
                </div>
                <div>
                    <el-button style="margin-left: 10px; margin-top: 20px; " type="success" :loading="loading"
                        @click="uploadEnd">上傳并保存</el-button>
                </div>
            </div>
        </el-dialog>

// // 實(shí)時(shí)預(yù)覽函數(shù)
        realTime(data) {
            // ①獲取截圖的 base64 數(shù)據(jù)
            this.$refs.cropper.getCropData((data) => {
                this.previewImageHeight = data;
            })
        },
        //將base64轉(zhuǎn)換為file文件流
        base64toFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime,
            })
        },
        // 自定義上傳給后臺，這里能最大限度自定義
        uploadEnd() {
            if (!this.option.img && this.option.img == '')
                return this.ME('請先選擇圖片')
            this.loading = true;
            if (this.previewImageHeight !== '') {
                const optionImg = this.base64toFile(this.previewImageHeight);
                const formData = new FormData()
                formData.append('file', optionImg);
                this.$api.Media.Image.Upload(formData).then((res) => {
                    this.loading = false;
                    this.imageUrl = res.data.url;
                    this.$message.success('上傳成功');
                    this.$emit("input", this.imageUrl);
                    this.close();
                }).catch(() => {
                    this.loading = false;
                })
            }
        }