封装组件el-upload通过v-model (一): 上传单张图片
ElementUI 中的el-upload 上传图片 我进行了二次封装。(默认大家都是有一定的vue基础的,细节就不过多的讲了)
在项目中我们主要拿到图片或者其他的一些参数 ,我这里是上传后返回的Guid,
所以上传的动作我就集中处理了,像 input 的 v-model 直接获取到参数
页面展示代码:
<imgeFile v-model="form.license" allclass="passport-uploader" inclass="passport-uploader-icon passport-s3" onclass="passport passport-pic"> <div class="el-upload__tip" slot="tip">请上传300*420像素不超过500K大小的图片,图片格式支持.PNG或.JPG</div> </imgeFile>
效果:
组件代码:
<template> <el-upload :class="allclass" :accept="accept" :action="fileUrl" :show-file-list="false" :on-success="handlePassportSuccess" :before-upload="beforePassportUpload"> <!---上传图片后的展示效果 imge是进行封装过的 imageUrl是Guid 统一处理---> <imge v-if="imageUrl" :src="imageUrl" :class="onclass"/> <!---上传图片前的展示效果---> <i v-else :class="inclass"></i> <!---提示---> <slot name="tip" slot="tip"></slot> </el-upload> </template> <script> import { Url, CCONFIG} from "@/api/apiconfig";//上传图片地址 import {getFileUrl} from "@/api/upload"; //获取图片方法 export default { model:{ prop:"value", }, props: { //配合v-model 加载初始值 value: { type: String, default: "" }, //大于多少兆开始压缩 sizeKB:{ type:Number, default: 100 }, //最大多少兆 maxSizeM:{ type:Number, default: 5 }, //图片同比压缩比列 scale:{ type:Number, default: 0.3 }, //上传文件类型 accept:{ type: String, default: "image/jpeg,image/png" }, //整体样式 allclass: { type: String, default: "passport-uploader-logo" }, //点击前样式 inclass: { type: String, default: "el-icon-plus avatar-uploader-icon" }, //点击后样式 onclass: { type: String, default: "passport-logo" }, }, data() { return { fileUrl: Url.imge_Upload,//上传服务器地址 imageUrl: "", filelist:[], }; },
//监听父组件值是否在变化
watch: {
//有些页面初始初始src没有赋值
value(newValue, oldValue){
this.imageUrl= newValue;
},
},
computed: {}, created: function () { this.imageUrl=this.value }, mounted() { }, methods: { //上传成功返回值 handlePassportSuccess(res, file) { if (res.code == "0000") { this.imageUrl=res.data.id; //返回 v-model的参数(关键) this.$emit('input', res.data.id) } else this.imageUrl = ""; }, //压缩图片 下面的代码都是压缩文件大小 beforePassportUpload(file) { var that = this; return new Promise((resolve, reject) => { const isJPG = file.type === "image/jpeg"; const isPNG = file.type === "image/png"; const kb= file.size/ 1024; const sizeM= file.size/ 1024/1024; const isLtKB = kb < this.sizeKB; let bool = false; let msg = ""; if ((isJPG || isPNG)&&sizeM<=this.maxSizeM) {//判断是否符合格式要求 bool = true; } else if(sizeM>this.maxSizeM){ var mag="上传文件必须是小于"+this.maxSizeM+"M"; this.$message({message:mag,type:'error',offset:10 }); reject(file); } else { this.$message({message:"上传文件必须是jpg、png格式!",type:'error',offset:10 }); reject(file); } if (bool && !isLtKB) {//如果格式符合要求,但是size过大,对图片进行处理 let image = new Image(), resultBlob = ""; image.src = URL.createObjectURL(file); image.onload = () => { resultBlob = that.compressUpload(image);//Blob resolve(resultBlob); }; } else if (bool && isLtKB) { resolve(file);//file } }); }, compressUpload(image) { let canvas = document.createElement("canvas");//创建画布元素 let ctx = canvas.getContext("2d"); let initSize = image.src.length; let { width } = image, { height } = image; canvas.width = width; canvas.height = height; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0, width, height); let compressData = canvas.toDataURL("image/jpeg", this.scale); //等比压缩 let blobImg = this.dataURItoBlob(compressData);//base64转Blob return blobImg; }, dataURItoBlob(data) { let byteString; if (data.split(",")[0].indexOf("base64") >= 0) { byteString = atob(data.split(",")[1]);//转二进制 } else { byteString = unescape(data.split(",")[1]); } let mimeString = data .split(",")[0] .split(":")[1] .split(";")[0]; let ia = new Uint8Array(byteString.length); for (let i = 0; i < byteString.length; i += 1) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); }, }, }; </script>
QQ交流群:929412850 希望大家一起能够探讨学习 转发请加上原文链接