网络技术分享-图片上传与图片裁剪结合vue3

时间：2023-03-28 15:08:50 HTML

要求：上传的图片限于长宽相同；只能上传图片；图片大小限制为500k。当前项目只需要上传图片信息即可。项目组件使用cropping：vue-cropperimport"vue-cropper/dist/index.css";import{VueCropper}from"vue-cropper";Upload：上传上传（元素加组件）实现原理：使用组件Upload查看图片是否需要裁剪，是否为图片，是否超过尺寸限制；裁剪后的图片尺寸受限；上传的图片信息泄露到组件外；组件调用img-url预览默认图片@img-upload上传裁剪页面实现弹窗显示所需的最终图片代码

从你的电脑中间

选择文件

取消OKLogic/**图片地址投递*/constprop=defineProps({imgUrl:{type:String,default:"",},});/**事件通知*/constemit=defineEmits(["img-upload"]);/**图片上传*/constimgUpload=反应性（{//是否显示裁剪dialogCropping:false,isCropping:false,//判断是否截屏//图片imageUrl:"",//图片格式imgBmp:"image/*",//图片名称imgName:"",});//图片上传前检查constbeforUpload:UploadProps["beforeUpload"]=async(rawFile)=>{//判断是否需要裁剪imgUpload.isCropping=(awaitimgSize(rawFile))asboolean;//图片名称imgUpload.imgName=rawFile.name;if(imgUpload.isCropping){if(rawFile.type.indexOf("image/")===-1){ElMessage.error("请上传正确的图片格式");返回假；}elseif(rawFile.size/1024/1024>0.5){ElMessage.error("图片大小不能超过500k");返回假；}}else{//输入裁剪imgCropping.imageUrl=URL.createObjectURL(rawFile);imgUpload.dialogCropping=true;返回假；}};//UploadconstupdataImg=async(data:any)=>{//如果没有截图，开启裁剪if(imgUpload.isCropping){//图片预览imgUpload.imageUrl=URL.createObjectURL(data.file);imgUpload.dialogCropping=false;imgUpload.isCropping=false;//图片信息emit("img-upload",data.file);}};/**图片裁剪*/constimgCropping=reactive({imageUrl:"",//裁剪图片的格式outputType:"png",//默认是否生成截图框autoCrop:true,//上传的图片按照原始比例渲染//original:true,//是否输出原始比例的截图full:false,//默认生成的截图框的宽度autoCropWidth:160,//的默认生成的截图框的高度autoCropHeight:160,//是否启用截图框的固定宽高比fixed:true,//截图框的宽高比fixedNumber:[1,1],//截图框是否限定为图片centerBox:true,});//生成裁剪后的图片consthandleCropping=(roleRefs:any,type:boolean)=>{if(type){roleRefs.getCropBlob((data:any)=>{//判断裁剪图片的大小if(data.size/1024/1024>0.5){ElMessage.error("裁剪图片的大小不能超过500k");}else{//图片预览imgUpload.imageUrl=URL.createObjectURL(data);imgUpload.dialogCropping=false;//图片信息emit("img-upload",blobToFile(data,imgUpload.imgName));}});}else{imgUpload.imageUrl="";imgUpload.dialogCropping=false;}};//清除图像constclearImg=()=>{imgUpload.imageUrl="";emit("img-upload");};onMounted(()=>{//图片地址传输imgUpload.imageUrl=prop.imgUrl;});图片相关方法封装/**查询图片大小*/exportconstimgSize=(file:any)=>{returnnewPromise((resolve,reject)=>{letreader=newFileReader();reader.readAsDataURL(file);reader.onload=()=>{//让页面中的img标签src指向读取路径letimg=newImage();img.src=reader.resultasstring;if(img.complete){//如果它存在于浏览器缓存中if(img.width/img.height!==1){resolve(false);}else{resolve(true);}}else{img.onload=()=>{如果(img.width/img.height!==1){resolve(false);}else{resolve(true);}};}};});};/***文件格式转换*@descriptionblobToFile*@param{Blob}blob*@param{String}fileName*/exportconstblobToFile=(blob:any,fileName:string)=>{returnnewwindow.File([blob],文件名,{类型:blob.type,});};

上一篇：交互式仪表板！Python让它变得简单！

下一篇：前端自动打包上传推送钉钉工具

网络技术分享-图片上传与图片裁剪结合vue3相关文章