axios+vue+vant 上传照片大图控制质量大小的转换，并转base64 ，后台返回网站；

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;
},