上传截取头像 element push
<template> <el-dialog title="上传头像" v-model="dialogVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close width="60rem" > <div class="avatar-container"> <!-- {{dialogVisible}} --> <!-- 待上传图片 --> <div v-show="!options.img"> <el-upload class="upload" ref="elUpload" action="#" :on-change="upload" accept="image/png, image/jpeg, image/jpg" :show-file-list="false" :auto-upload="false" > <el-button slot="trigger" type="primary" ref="uploadBtn"> 选择图片 </el-button> </el-upload> <div>支持jpg、png格式的图片,大小不超过5M</div> </div> <!-- <img :src="options.img" alt=""> --> <!-- 已上传图片 --> <div v-show="options.img" class="avatar-crop"> <vueCropper 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> <template #footer> <span 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> </template> </el-dialog> </template> <script lang="ts"> import { ref, reactive, defineComponent } from 'vue' import { VueCropper } from 'vue-cropper' import 'vue-cropper/dist/index.css' import type { UploadProps } from 'element-plus' import { ElMessage } from 'element-plus'
export default defineComponent({ props: { dialogVisible: { type: Boolean } }, components: { VueCropper }, setup(props, { emit }) { // console.log(11111); const cropper = ref() const uploadBtn = ref() const elUpload = ref() const options = reactive({ img: '', // 原图文件 autoCrop: true, // 默认生成截图框 fixedBox: false, // 固定截图框大小 canMoveBox: true, // 截图框可以拖动 autoCropWidth: 200, // 截图框宽度 autoCropHeight: 200, // 截图框高度 fixed: true, // 截图框宽高固定比例 fixedNumber: [1, 1], // 截图框的宽高比例 centerBox: true, // 截图框被限制在图片里面 canMove: false, // 上传图片不允许拖动 canScale: false // 上传图片不允许滚轮缩放 }) // vueCropper组件 裁剪配置信息 // 读取原图 const upload: UploadProps['onChange'] = (file, uploadFiles) => { //console.log(file); const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' const isLt5M = file.raw.size / 1024 / 1024 < 5 if (!isIMAGE) { ElMessage.warning('请选择 jpg、png 格式的图片') return false } if (!isLt5M) { ElMessage.warning('图片大小不能超过 5MB') return false } let reader = new FileReader() reader.readAsDataURL(file.raw) //console.log(reader); reader.onload = (e) => { options.img = e.target.result // base64 } elUpload.value.clearFiles() //这里处理重新上传时,upload组件change事件错误问题 } // 获取截图信息 const getCrop = () => { // 获取截图的 base64 数据 cropper.value.getCropData((data) => { // console.log(data); }) // 获取截图的 blob 数据 //console.log(cropper.value); cropper.value.getCropBlob((data) => { // console.log(111); let formData = new FormData() //第三个参数是规定以什么为后缀,接口是根据后缀来返回地址格式的 formData.append('file', data, 'chris.jpg') //上传接口 接口.(formData).then((res) => { emit('closeDialogs') // closeDialog() }) // emit('closeAvatarDialog') }) } // 重新上传 const reupload = () => { // console.log(uploadBtn.value.ref); uploadBtn.value.ref.click() } // 关闭弹框 const closeDialog = () => { emit('closeAvatarDialog') options.img = '' } return { options, cropper, uploadBtn, elUpload, upload, getCrop, reupload, closeDialog } } }) </script> <style lang="scss" scoped> .dialog-footer { display: flex; justify-content: space-between; align-items: center; font-size: 1.4rem; .reupload { color: #007768; cursor: pointer; } } .avatar-container { display: flex; justify-content: center; align-items: center; width: 56rem; height: 35rem; background-color: #f0f2f5; margin-right: 1rem; border-radius: 0.4rem; .upload { text-align: center; margin-bottom: 2.4rem; } .avatar-crop { width: 56rem; height: 35rem; position: relative; .crop-box { width: 100%; height: 100%; border-radius: 0.4rem; overflow: hidden; } } } </style>