vue中上传图片转base64处理，并向后台发送处理...；

1. 上传图片时：pc端正常可以传多张图片；手机端只能一张一张上传；（可以完善）；

使用前端框架有：WeUi，vant ；

style：

/*改造上传图片 */
.applay-uploadimg .weui-uploader__bd{  margin-bottom: 0;margin-right: 0; }
.applay-uploadimg .weui-uploader__input-box{width: 100px; height: 100px;}
.applay-uploadimg  .weui-uploader__file { margin-right: 15px;position: relative;width: 100px; height: 100px;}
.applay-uploadimg  .weui-uploader__file .upload-del{padding-top: 3px;position: absolute;right: 0px;bottom: 0;width: 100%;background-color: rgba(0,0,0,.5);}

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">
         大小不超过3M,最多上传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">
         大小不超过3M,最多上传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"  style=""   @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> 

js:代码 

data:参数：

finished:false,
loading:false,
formData:new FormData(),//参数；暂时没有；可以扩展；
imgs: {},//上传身份证图片；暂时没有；可以扩展；
imgLen:0, //上传身份证图片长度；
imgCoverLen: 0,//上传门店图片长度；
entity:{
wechat_openid:open_id,
role_id:"",//等级
cover:[],
cardid:'',
cardid_photo:[],
}, 

/**
  * 上传身份证图片
  */
 addImg:function(event){
     var that=this;
    // that.$toast('图片上传中...');
     let inputDOM1 = this.$refs.inputer;
     // 通过DOM取文件数据
     this.fil = inputDOM1.files;
     let oldLen=this.imgLen;
     let len=this.fil.length+oldLen;
     if(len>2){
         this.$toast('最多可上传2张，您还可以上传'+(2-oldLen)+'张');
         return false;
     }
    // that.$toast.loading();
     for (let i=0; i < this.fil.length; i++) {
         let size2 = Math.floor(this.fil[i].size / 1024);
         if (size2 > 3*1024) {
             this.$toast('请选择3M以内的图片！');
             return false
         }
         this.imgLen++;
         var reader = new FileReader();
         reader.readAsDataURL(this.fil[i]);
         reader.onload = function (e) {
             // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
             var imgcode = e.target.result;
            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);
                 }
             })
         }
     }
//  console.log(this.entity.cardid_photo)
 },
 //删除上传的身份证照片；
 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;
     let inputDOM2 = this.$refs.inputer2;
     // var reader=new FileReader();
     // 通过DOM取文件数据
     this.fil2 = inputDOM2.files;
     let oldLen=this.imgCoverLen;
     let len=this.fil2.length+oldLen;
     if(len>5){
         this.$toast('最多可上传5张，您还可以上传'+(5-oldLen)+'张');
         /*alert('最多可上传5张，您还可以上传'+(5-oldLen)+'张');*/
         return false;
     }
     // that.$toast.loading();
     for (let i=0; i < this.fil2.length; i++) {
         let size = Math.floor(this.fil2[i].size / 1024);
         if (size > 3*1024) {
             this.$toast('请选择3M以内的图片！');
             return false
         }
         this.imgCoverLen++;
         var reader2 = new FileReader();
         reader2.readAsDataURL(this.fil2[i]);
         reader2.onload = function (e) {
             // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
             var imgcode2 = e.target.result;
             that.$toast.loading("上传图片中...");
             axios.post('/api/uploads/add',{file:imgcode2}).then(function(res){
                 if(res.data.code == 0){
                     that.entity.cover.push(res.data.data.url);
                 }else{
                     that.$toast(res.data.message);
                 }
             })
         };
     }
     // console.log(this.entity.cover)
 },
 //删除上传的门店照片；
 delCoverImg:function(key){
     this.$delete(this.entity.cover,key);
     this.imgCoverLen--;
     this.entity.cover=this.entity.cover;
 },