html:
<!-- 身份证照片 -->
<div class="van-cell van-field">
<div class="van-cell__title">
<span>身份证照片</span>
</div>
<div class="van-cell__value font-size12 font-metud mt-5">
最多上传2张!
</div>
</div>
<div class="posrev bg-white applay-uploadimg">
<div class="weui-uploader__bd plr-15">
<ul class="weui-uploader__files" id="uploaderFiles">
<template v-for='(value, key) in entity.cardid_photo'>
<li class="weui-uploader__file" :style="'background-image:url('+value+')'"><a href="javascript:;" class="font-white text-center upload-del" style="" @click="delImg(key)"><van-icon name="delete" :size="16" /></a></li>
</template>
</ul>
<div v-if="imgLen>=2 ? false : true" class="weui-uploader__input-box">
<input id="fileid" class="weui-uploader__input" type="file" accept="image/*" @change="addImg" ref="inputer" multiple>
</div>
</div>
</div>
<!-- 店面照片 -->
<div class="van-cell van-field">
<div class="van-cell__title">
<span>店面照片</span>
</div>
<div class="van-cell__value font-size12 font-metud mt-5">
最多上传5张!
</div>
</div>
<div class="posrev bg-white applay-uploadimg">
<div class="weui-uploader__bd plr-15">
<ul class="weui-uploader__files" id="uploaderFiles">
<template v-for='(value, key) in entity.cover'>
<li class="weui-uploader__file" :style="'background-image:url('+value+')'"><a href="javascript:;" class="font-white text-center upload-del" @click="delCoverImg(key)"><van-icon name="delete" :size="16"/></a></li>
</template>
</ul>
<div v-if="imgCoverLen>=5 ? false : true" class="weui-uploader__input-box">
<input type="file" class="weui-uploader__input" @change="addCoverImg" ref="inputer2" id="filecover" multiple accept="image/*"/>
</div>
</div>
</div>
/*
三个参数
file:一个是文件(类型是图片格式),
w:一个是文件压缩的后宽度,宽度越小,字节越小
objDiv:一个是容器或者回调函数
photoCompress()
*/
photoCompress: function(file,w,objDiv){
var that=this;
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
//console.log(re);
that.canvasDataURL(re,w,objDiv)
}
},
//图片压缩
canvasDataURL:function(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小,所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
},
/*
* 上传身份证图片
*/
addImg:function(event){
var that=this;
//that.$toast.loading("图片上传中...");
that.$toast.loading({ mask: true, message: '上传中...'});
let inputDOM1 = that.$refs.inputer;
// 通过DOM取文件数据
that.fil = inputDOM1.files;
let oldLen=that.imgLen;
let len=that.fil.length+oldLen;
if(len>2){
this.$toast('最多可上传2张');
return false;
}
// that.$toast.loading();
//console.log(that.fil);
for (let i=0; i < this.fil.length; i++) {
let size2 = Math.floor(this.fil[i].size / 1024);
if(size2 > 2025) { //大于2M,进行压缩上传
that.photoCompress(that.fil[i], {
quality: 0.2
}, function(base64Codes){
var bl = base64Codes;
// that.$toast.loading("上传图片中...");
axios.post('/api/uploads/add',{file:bl}).then(function(res){
if(res.data.code == 0){
that.entity.cardid_photo.push(res.data.data.url);
}else{
that.$toast(res.data.message);
}
})
});
}else{ //小于等于1M 原图上传
var reader = new FileReader();
reader.readAsDataURL(that.fil[i]);
reader.onload = function () {
var imgcode=this.result;
// 读取到的图片base64 数据编码 将此编码字符串传给后台即可
//that.$toast.loading("图片上传中...");
axios.post('/api/uploads/add',{file:imgcode}).then(function(res){
if(res.data.code == 0){
that.entity.cardid_photo.push(res.data.data.url);
}else{
that.$toast(res.data.message);
}
})
}
}
that.imgLen++
}
},
//删除上传的身份证照片;
delImg:function(key){
this.$delete(this.entity.cardid_photo,key);
this.imgLen--;
this.entity.cardid_photo=this.entity.cardid_photo;
// console.log(this.entity.cardid_photo)
},
/*
* 上传门店图片
*/
addCoverImg:function(event){
var that=this;
//that.$toast.loading("图片上传中...");
that.$toast.loading({ mask: true, message: '上传中...'});
// that.$toast('图片上传中...');
let inputDOM2 = that.$refs.inputer2;
// 通过DOM取文件数据
that.fil2 = inputDOM2.files;
let oldLen=that.imgCoverLen;
let len=that.fil2.length+oldLen;
if(len>5){
this.$toast('最多可上传2张');
return false;
}
// that.$toast.loading();
//console.log(that.fil);
for (let i=0; i < this.fil2.length; i++) {
let size2 = Math.floor(this.fil2[i].size / 1024);
if(size2 > 2025) { //大于2M,进行压缩上传
that.photoCompress(that.fil2[i], {
quality: 0.2
}, function(base64Codes){
var b2 = base64Codes;
axios.post('/api/uploads/add',{file:b2}).then(function(res){
if(res.data.code == 0){
that.entity.cover.push(res.data.data.url);
}else{
that.$toast(res.data.message);
}
})
});
}else{ //小于等于1M 原图上传
var reader2 = new FileReader();
reader2.readAsDataURL(that.fil2[i]);
reader2.onload = function () {
var imgcode=this.result;
// 读取到的图片base64 数据编码 将此编码字符串传给后台即可
// that.$toast.loading("图片上传中...");
axios.post('/api/uploads/add',{file:imgcode}).then(function(res){
if(res.data.code == 0){
that.entity.cover.push(res.data.data.url);
}else{
that.$toast(res.data.message);
}
})
}
}
that.imgCoverLen++;
}
},
//删除上传的门店照片;
delCoverImg:function(key){
this.$delete(this.entity.cover,key);
this.imgCoverLen--;
this.entity.cover=this.entity.cover;
},