1.安装 ：npm i cropperjs

image.png

3.最好写成一个组件，随时调用

<template>
    <div class="v-simple-cropper">
        <input class="file" type="file" accept="image/*" @change="uploadChange" />
        <div class="v-cropper-layer" ref="layer" v-show="showlayer">
            <div class="layer-header">
                <button class="cancel" @click="cancelHandle">取消</button>
                <button class="confirm" @click="confirmHandle">選取</button>
            </div>
            <img ref="cropperImg" />
        </div>
    </div>
</template>

import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.min.css';
import * as qiniu from 'qiniu-js';
private cropper: any;
// 裁剪板块
private showlayer = false;
// 裁剪参数
private initParam = {
    scale: 1 // 相对手机屏幕放大的倍数
};
// 初始化裁剪插件
private init() {
    const cropperImg = this.$refs.cropperImg as HTMLImageElement;
    this.cropper = new Cropper(cropperImg, {
        aspectRatio: 1 / 1, // 剪裁比例
        dragMode: 'move' // 模式
    });
}
// 选择上传文件
private uploadChange(e) {
    const file = e.target.files[0];
    this.showlayer = true;
    const URL = window.URL || window.webkitURL;
    this.cropper.replace(URL.createObjectURL(file));
}
// 取消上传
private cancelHandle() {
    this.cropper.reset();
    this.showlayer = false;
}
// 确定上传
private confirmHandle() {
    const cropBox = this.cropper.getCropBoxData();
    const scale = this.initParam['scale'] || 1;
    this.cropper
        .getCroppedCanvas({
            width: cropBox.width * scale,
            height: cropBox.height * scale
        })
        //把裁剪的图片转换成blob类型文件，在通过new File()，转换成file文件
        .toBlob(async blob => {
            //重置file的name，以时间戳作为文件名
            const timeString = new Date().getTime();
            const imgFile = new File([blob], `${timeString}.jpg`, { type: 'image/jepg' });
            this.showlayer = false;
            const res = await this.uploadFile(imgFile);
            this.$emit('uploadURL', res);
        });
}
// 请求接口上传图片
private uploadFile(file) {
    return new Promise(resolve => {
        msg.PostQiniu().then(res => {
            const uptoken = res.token;
            const key = file.name;
            const config = {
                useCdnDomain: false, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                region: undefined // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
            };
            const putExtra: any = {
                fname: file.name, //文件原文件名
                params: {}, //用来放置自定义变量
                mimeType: ['image/png', 'image/jpeg', 'image/gif'] //用来限制上传文件类型，为 null 时表示不对文件类型限制；
            };
            const observable = qiniu.upload(file, key, uptoken, putExtra, config);
            observable.subscribe({
                next: result => {
                    // 主要用来展示进度
                    console.warn(result);
                },
                error: () => {
                    this.$toast.show('提交失敗');
                },
                complete: e => {
                    resolve(`${res.domain}${e.key}`);
                }
            });
        });
    });
}

4.样式

<style lang="scss" scoped>
@import '@/assets/style/color.scss';
.v-simple-cropper {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .file {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .v-cropper-layer {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 99999;
        .layer-header {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99999;
            background: rgba(#fff, 0.5);
            width: 100%;
            height: 0.8rem;
            padding: 0 0.2rem;
            box-sizing: border-box;
        }
        .cancel,
        .confirm {
            line-height: 0.8rem;
            font-size: 0.28rem;
            background: none;
            border: 0;
            outline: 0;
            float: left;
        }
        .confirm {
            float: right;
        }
        img {
            position: inherit !important;
            border-radius: inherit !important;
            float: inherit !important;
        }
    }
}
</style>

5.在页面调用组件

<cropperBox @uploadURL="uploadURL" />
// 上传成功 获取img
private uploadURL(url) {
    console.log(url);
}