安装 文档

npm install vue-cropper

父组件

<template><div><el-button @click="dialogVisible = true">上传头像</el-button><avatar-cropper :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></avatar-cropper></div>
</template><script>import avatarCropper from '@/components/avatarCropper'export default {components: {avatarCropper},data() {return {dialogVisible: false}},methods: {closeAvatarDialog(data) {console.log(data)this.dialogVisible = false}}}
</script>

子组件

<template><el-dialogtitle="裁剪头像":visible.sync="dialogVisible":show-close="false":close-on-click-modal="false":close-on-press-escape="false"@close="closeDialog"width="600px"><div class="avatar-container"><!-- 待上传图片 --><div v-show="!options.img"><el-uploadclass="upload"ref="upload"action="":on-change="upload"accept="image/png, image/jpeg, image/jpg":show-file-list="false":auto-upload="false"><el-button slot="trigger" size="small" type="primary" ref="uploadBtn">选择图片</el-button></el-upload><div>支持jpg、png格式的图片，大小不超过5M</div></div><!-- 已上传图片 --><div v-show="options.img" class="avatar-crop"><vueCropperv-if="dialogVisible"class="crop-box"ref="cropper":img="options.img":autoCrop="options.autoCrop":fixedBox="options.fixedBox":canMoveBox="options.canMoveBox":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":centerBox="options.centerBox":fixed="options.fixed":fixedNumber="options.fixedNumber":canMove="options.canMove":canScale="options.canScale"></vueCropper></div></div><span slot="footer" class="dialog-footer"><div class="reupload" @click="reupload"><span v-show="options.img">重新上传</span></div><div><el-button @click="closeDialog">取 消</el-button><el-button type="primary" @click="getCrop">确 定</el-button></div></span></el-dialog>
</template><script>
import { VueCropper } from 'vue-cropper'
export default {components: {VueCropper},name: 'avatarCropper',props: {dialogVisible: {type: Boolean,default: false}},data() {return {// vueCropper组件 裁剪配置信息options: {img: '', // 原图文件autoCrop: true, // 默认生成截图框fixedBox: false, // 固定截图框大小canMoveBox: true, // 截图框可以拖动autoCropWidth: 200, // 截图框宽度autoCropHeight: 200, // 截图框高度fixed: true, // 截图框宽高固定比例fixedNumber: [1, 1], // 截图框的宽高比例centerBox: true, // 截图框被限制在图片里面canMove: false, // 上传图片不允许拖动canScale: false // 上传图片不允许滚轮缩放}}},methods: {// 读取原图upload(file) {const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'const isLt5M = file.raw.size / 1024 / 1024 < 5if (!isIMAGE) {this.$message({showClose: true,message: '请选择 jpg、png 格式的图片',type: 'warning'})return false}if (!isLt5M) {this.$message({showClose: true,message: '图片大小不能超过 5MB',type: 'warning'})return false}let reader = new FileReader()reader.readAsDataURL(file.raw)reader.onload = e => {this.options.img = e.target.result // base64}},// 获取截图信息getCrop() {// 获取截图的 base64 数据// this.$refs.cropper.getCropData((data) => {//   this.$emit('closeAvatarDialog', data)//   this.closeDialog()// });// 获取截图的 blob 数据this.$refs.cropper.getCropBlob(data => {this.$emit('closeAvatarDialog', data)this.closeDialog()})},// 重新上传reupload() {this.$refs.uploadBtn.$el.click()},// 关闭弹框closeDialog() {this.$emit('update:dialogVisible', false)this.options.img = ''}}
}
</script><style lang="scss" scoped>
.dialog-footer {display: flex;justify-content: space-between;align-items: center;font-size: 14px;.reupload {color: #409eff;cursor: pointer;}
}
.avatar-container {display: flex;justify-content: center;align-items: center;width: 560px;height: 400px;background-color: #f0f2f5;margin-right: 10px;border-radius: 4px;.upload {text-align: center;margin-bottom: 24px;}.avatar-crop {width: 560px;height: 400px;position: relative;.crop-box {width: 100%;height: 100%;border-radius: 4px;overflow: hidden;}}
}
</style>