H5 使用input标签上传图片给后台
Posted edczjw-edison
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 使用input标签上传图片给后台相关的知识，希望对你有一定的参考价值。
html代码：
<div class="hpk-showimg">
<!-- 营业执照 -->
<div class="idcardup">
<a href="javascript:;" class="a-upload">
<input v-if="ipshow" type="file" accept="image/*" name="file1" capture="camera" @change="upload">
<input v-else type="file" accept="image/*" name="file1" @change="upload">
</a>
<img :src="formData.busLicenseImgUrl" v-if="idylength>0" class="id-img3">
<img src="../image/icon_completed_idcard.png" v-if="idylength>0" class="id-img2">
<div class="rload" v-if="idylength>0" >点击重新上传</div>
<img v-else src="../image/idcard_yye@2x.png" class="id-img">
</div>
<!-- 食品执照 -->
<div class="idcardup1">
<a href="javascript:;" class="a-upload1">
<input v-if="ipshow" type="file" accept="image/*" name="file2" capture="camera" @change="upload1">
<input v-else type="file" accept="image/*" name="file2" @change="upload1">
</a>
<img :src="formData.foodsLicenseImgUrl" v-if="smflength>0" class="id-img3">
<img src="../image/icon_completed_idcard.png" v-if="smflength>0" class="id-img2">
<div class="rload" v-if="smflength>0">点击重新上传</div>
<img v-else src="../image/smfood.png" class="id-img">
</div>
</div>
less:
.hpk-showimg{ align-items: center; height: 20%; padding: .24rem .32rem; .idcardup { position: relative; text-align: center; background: #fff; float: left; width: 48.75% !important; height: 100.6% !important; .id-img { width: 100% !important; height: 100.6% !important; margin: 0px auto; border-radius: .1rem; } // 钩号 .id-img2{ position: absolute; width: .92rem; height: .92rem; bottom: 1rem; left: calc( 50% - .46rem); } .id-img3 { width: 100% !important; height: 100.6% !important; margin: 0px auto; border-radius: .1rem; opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ position: relative; border: .02rem solid rgba(146, 139, 132, 0.721); } // 重新上传文本 .rload{ position: absolute; bottom: .26rem; font-size: .26rem; height: .42rem; color: #888; line-height: .42rem; left: calc( 50% - .78rem); } } .idcardup1 { position: relative; text-align: center; background: #fff; float: right; width: 48.75% !important; height: 100.6% !important; .id-img { width: 100% !important; height: 100.6% !important; margin: 0px auto; border-radius: .1rem; } .id-img2{ position: absolute; width: .92rem; height: .92rem; bottom: 1rem; left: calc( 50% - .46rem); } .id-img3 { width: 100% !important; height: 100.6% !important; margin: 0px auto; border-radius: .1rem; opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ position: relative; border: 1px solid rgba(146, 139, 132, 0.721); } .rload{ position: absolute; bottom: .26rem; font-size: .26rem; height: .42rem; color: #888; line-height: .42rem; left: calc( 50% - .78rem); } } } .a-upload { width: 100% !important; height: 100% !important; position: absolute; left: 0; cursor: pointer; color: #888; background: transparent; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; z-index: 9; *zoom: 1; } .a-upload input { position: absolute; left: 0px; top: 0; opacity: 0; width: 100% !important; height: 100% !important; filter: alpha(opacity=0); cursor: pointer } .a-upload1 { height: 100% !important; position: absolute; cursor: pointer; left: 0; color: #888; background: transparent; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; z-index: 9; *zoom: 1; width: 100%; } .a-upload1 input { position: absolute; left: 0px; top: 0; opacity: 0; width: 100% !important; height: 100% !important; filter: alpha(opacity=0); cursor: pointer } .a-upload:hover { color: #444; background: transparent; border-color: #ccc; text-decoration: none }
vue:
data() { return { ipshow:false,//切换input属性 formData:{ busLicenseImgUrl:"",//营业执照url foodsLicenseImgUrl:"",//食品执照url }, idylength:0,//营业执照长度 smflength:0,//食品执照长度 } },
//上传营业执照 upload(e){ let files = e.target.files || e.dataTransfer.files var index = 0;//营业执照标识 if (!files.length) return this.imgPreview(files[0],index) }, //上传食品 upload1(e){ let files = e.target.files || e.dataTransfer.files var index = 1;//食品执照标识 if (!files.length) return this.imgPreview(files[0],index) }, imgPreview(file,index) { let self = this let Orientation // 去获取拍照时的信息，解决拍出来的照片旋转问题 EXIF.getData(file, function () { Orientation = EXIF.getTag(this, ‘Orientation‘) }) // 看支持不支持FileReader if (!file || !window.FileReader) return if (/^image/.test(file.type)) { var fileName = file.name; // 创建一个reader let reader = new FileReader(); // 将图片2将转成 base64 格式 reader.readAsDataURL(file); // 读取成功后的回调 reader.onloadend = function () { let result = this.result; let img = new Image(); img.src = result; //判断图片是否小于2M,是就直接上传，反之压缩图片 if (this.result.length <= (2048 * 1024)) { var headerImage = this.result; self.postImg(headerImage, fileName, file, index); } else { img.onload = function () { let data = self.compress(img, Orientation); var headerImage = data; self.postImg(headerImage, fileName, file, index); } } } } }, postImg(headerImage, fileName, fil, index) { this.showjz = true; //压缩后的base64图片地址 var imageBase64 = headerImage.substring(headerImage.indexOf(",") + 1) var mchNo = this.getQueryVariable(‘mchNo‘) let data = { mchNo:mchNo, imageBase64:imageBase64 } if(index == 0){ //营业执照 axios({ method: ‘post‘, url: "http://test.hpk.msxiaodai.com/apply/businessLicenseOCR", data: data }) .then( response => { var res = response.data if (res.code == ‘0000‘) { this.idylength = 1; this.showjz = false; if(this.idylength == 1 && this.smflength == 1){ this.showcontent = true;//显示数据信息 } this.formData.busLicenseImgUrl = res.data.imageUrl this.formData.mchAddress = res.data.address this.formData.legal = res.data.legal this.formData.mchName = res.data.name this.formData.organCode = res.data.regNum this.formData.shopName = res.data.shopName this.formData.business = res.data.business this.formData.composingForm = res.data.composingForm this.formData.mainType = res.data.mainType this.formData.period = res.data.period vant.Toast.success(‘营业执照识别成功‘); }else if(res.code == ‘1023‘){ this.showerror = true this.errorval = res.msg this.showjz = false; this.showcontent = false;//显示数据信息 this.idylength = 0; this.formData.busLicenseImgUrl = "" this.formData.mchAddress = "" this.formData.legal = "" this.formData.mchName = "" this.formData.organCode = "" this.formData.business = "" this.formData.composingForm = "" this.formData.mainType = "" this.formData.period = "" } else { this.showerror = true this.errorval = ‘请上传真实有效的营业执照‘ this.showjz = false; this.showcontent = false;//显示数据信息 this.idylength = 0; this.formData.busLicenseImgUrl = "" this.formData.mchAddress = "" this.formData.legal = "" this.formData.mchName = "" this.formData.organCode = "" this.formData.business = "" this.formData.composingForm = "" this.formData.mainType = "" this.formData.period = "" } }, response => { this.showjz = false; this.idylength = 0; } ) }else{ if(this.idylength !=0){ //食品执照 axios({ method: ‘post‘, url: "http://test.hpk.msxiaodai.com/apply/foodLicenseOCR", data: data }) .then( response => { var res = response.data if (res.code == ‘0000‘) { this.smflength = 1; //显示软键盘 this.butsk() this.showjz = false; this.showcontent = true;//显示数据信息 this.formData.foodsLicenseImgUrl = res.data.imageUrl vant.Toast.success(‘食品经营许可证识别成功‘); }else if(res.code == ‘1023‘){ this.showerror = true this.errorval = res.msg this.showcontent = false;//显示数据信息 this.showjz = false; this.smflength = 0; this.formData.foodsLicenseImgUrl = "" } else { this.showerror = true this.errorval = ‘请上传真实有效的食品经营许可证‘ this.showcontent = false;//显示数据信息 this.showjz = false; this.smflength = 0; this.formData.foodsLicenseImgUrl = "" } }, response => { this.showjz = false; this.showerror = true this.errorval = ‘异常‘ this.smflength = 0; } ) }else{ this.showerror = true this.errorval = ‘请先上传真实有效的营业执照‘ this.showjz = false; } } }, // 压缩图片不得大于2M compress(img, Orientation) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext(‘2d‘); //瓦片canvas let tCanvas = document.createElement("canvas"); let tctx = tCanvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; //如果图片大于6百万像素，计算压缩比并将大小压至600万以下 let ratio; if ((ratio = width * height / 6000000) > 1) { console.log("大于600万像素") ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于400万则使用瓦片绘制 let count; if ((count = width * height / 4000000) > 1) { console.log("大于400万像素"); count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //进行最小压缩 let ndata = canvas.toDataURL(‘image/jpeg‘, 0.2); // console.log(‘压缩前：‘ + initSize); // console.log(‘压缩后：‘ + ndata.length); // console.log(‘压缩率：‘ + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }, },
以上是关于H5 使用input标签上传图片给后台的主要内容，如果未能解决你的问题，请参考以下文章