七、前端-裁剪组件开发1. 裁剪模块分析
用户上传图片并镜像预览裁剪操作在多个页面中都会使用到，因此非常有必要将它封装成一个公共的子组件 。其他页面使用这个组件时，图片上传地址、图片宽度、图片高度都不尽相同 。因此将这个三个值设为子组件的参数变量，当用户完成图片裁剪后，点击上传时，调用上传组件，并给父组件传递success事件，并包含最终图片的URL地址参数 。
2. 裁剪组件代码实现
裁剪组件基于element-plus（参考地址：https://github.com/element-plus/element-plus）和vue-cropper（参考地址：https://github.com/xyxiao001/vue-cropper）二次封装实现
- 用户图片裁剪组件（UploadImg.vue）
<template><div><el-upload accept=".jpg,.jpeg,.png"action="./":auto-upload="false":on-change="uploadChange":show-file-list="false"><el-button class="upload-btn"><MyIcon class="upload-icon" type="icon-upload-img"/><p>选择图片</p></el-button></el-upload><el-dialog title="图片裁剪" v-model="showCopper" append-to-body center><div class="cropper" v-loading="loading" element-loading-text="图片上传中..."><span class="cropper-area"><vueCropperref="cropper":img="cropImg":autoCrop="true":autoCropWidth="props.width":autoCropHeight="props.height":fixedNumber="[props.width/props.height,1]":fixed="true"@realTime="realTime"></vueCropper></span><span class="preview-area"><p>图片预览</p><div class="show-preview"><div :style="previews.div" class="preview"><img :src="https://www.baikexueshe.com/s/previews.url" :style="previews.img"></div></div></span></div><template #footer><el-button size="medium" type="success"><label class="pointer" for="uploads">更换图片</label></el-button><input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"accept="image/png, image/jpeg, image/jpg" @change="uploadChange($event)"><el-button-group class="cropper-btn-group"><el-button size="medium" type="primary" plain @click="changeScale(1)"><MyIcon type="icon-amplification"/></el-button><el-button size="medium" type="primary" plain @click="changeScale(-1)"><MyIcon type="icon-narrow"/></el-button><el-button size="medium" type="primary" plain @click="changeReset()"><MyIcon type="icon-reset"/></el-button><el-button size="medium" type="primary" plain @click="changeRotate(1)"><MyIcon type="icon-clockwise-sense"/></el-button><el-button size="medium" type="primary" plain @click="changeRotate(-1)"><MyIcon type="icon-clockwise-dirction"/></el-button></el-button-group><el-button size="medium" @click="showCopper=false">取 消</el-button><el-button type="primary" @click="confirmFn" size="medium">确 定</el-button></template></el-dialog></div></template><script setup>import {reactive, ref} from \'vue\'import icon from "@/utils/icon";import timeFormat from "@/utils/timeFormat";import \'vue-cropper/dist/index.css\'import {VueCropper} from "vue-cropper";import qiniuUpload from "@/utils/qiniuUpload";import {ElMessage} from \'element-plus\'let {MyIcon} = icon()// 格式化处理时间let {timeFile} = timeFormat()// 七牛图片上传let {upload} = qiniuUpload()const props = defineProps({// 图片宽度width: {type: Number,required: false,default: 200},// 图片高度height: {type: Number,required: false,default: 200},// 图片保存目录dir: {type: String,required: true,default: \'upload\'}})// 定义事件(子组件向父组件传参)const emit = defineEmits([\'saveImg\']);// 图像裁剪组件对象const cropper = ref(null);// 裁剪后的图片文件const cropImg = ref(\'\');// 图片裁剪对话框是否显示const showCopper = ref(false);// 文件上传组件选取图片事件const uploadChange = (file) => {let fileObjif (\'raw\' in file) {console.log("element对象")fileObj = file.raw} else {console.log("原生对象")fileObj = file.target.files[0]}const reader = new FileReader();reader.onload = (event) => {cropImg.value = https://www.baikexueshe.com/s/event.target.result;};reader.readAsDataURL(fileObj)showCopper.value = true;}// 图片裁剪预览数据const previews = reactive({})// 图片裁剪预览事件const realTime = (data) => {Object.assign(previews, data)}// 图片裁剪缩放事件const changeScale = (num) => {num = num || 1cropper.value.changeScale(num)}// 图片裁剪旋转事件const changeRotate = (num) => {if (num === 1) {cropper.value.rotateLeft()} else {cropper.value.rotateRight()}}// 图片裁剪重置事件const changeReset = () => {cropper.value.refresh()}// 文件上传动画状态const loading = ref(false)// 图片裁剪完成上传事件const confirmFn = () => {// 获取blob对象cropper.value.getCropBlob(blobData => {console.log(blobData)loading.value = true//blob转fileconst file = new File([blobData], timeFile(Date.now()) + /'.jpg\', {type: blobData.type});console.log(file)upload(props.dir, file).then((response) => {console.log(response)ElMessage({message: \'图片上传成功！\',type: \'success\',})emit(\'saveImg\', response)showCopper.value = https://www.baikexueshe.com/s/falseloading.value = false}).catch(response => {//发生错误时执行的代码console.log(response)ElMessage.error(/'图片上传失败！\')loading.value = https://www.baikexueshe.com/s/false});})}
- 支付宝利息怎么算 支付宝利息是几厘
- 如何切换到本地管理员账户登录 win10怎么修改电脑管理员用户名
- win10系统怎么看内存条型号 win10怎样查看内存条型号
- 1-20的数字田格模板图片 一字怎么写田字格视频
- 如何设置电脑背景桌面删除 win10系统动态壁纸怎么设置
- 梦幻西游生日快乐区怎么样
- 玩DNF组队会卡屏怎么回事 dnf故意卡屏方法
- 天谕流光加点2021端游 天谕流光怎么加点
- 笔记本关机后开不了机怎么回事儿 笔记本电脑开不了机解决方法
- 写自己的小伙伴的作文怎么写 写小伙伴的作文怎么写
特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。