vant 图片上传 多图上传

1.mpvue 中使用了vant-weapp中多图上传

先上代码

data中要定义个数组存放图片
定义数据

data(){
	return {
		fileList: []
	}
}

html

<ul style="display:block;clear:both;margin:13px 10px;width:88%">
    <li v-for="(item,index) in fileList" :key="index" style="width:30%;float:left;position:relative">
        <image :src="item" style="width:77px;height:77px;background:rgba(247,248,250);border-radius:5px"></image>
        <div class="closeImg" @click="closeImg(index)"><van-icon name="cross" custom-style="color:#fff;font-size:12px" /></div>
    </li>
    <li>
        <image @click="afterRead" style="width:77px;height:77px;text-align:center;line-height:77px;background:rgba(247,248,250);margin-left:7px;border-radius:5px;position:relative">
            <span class="iconfont uploadimg">&#xe688;</span>
        </image>
    </li>
</ul>

js

// 转base64
base64({url,type}){
    return new Promise((resolve, reject) => {
        wx.getFileSystemManager().readFile({
        filePath: url, //选择图片返回的相对路径
        encoding: 'base64', //编码格式
        success: res => {
            resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
        },
        fail: res => reject(res.errMsg)
        })
    })
},

//上传
        async afterRead(file){
            var count = 1;
            var that = this;
            wx.chooseImage({
                count: count,
                sizeType: ['compressed'],
                sourceType: ['album'],
                success(res) {
                var tempFilePaths = res.tempFilePaths;
                for (let i = 0; i < res.tempFilePaths.length; i++) {
                    wx.compressImage({// 图片压缩
                        src: res.tempFilePaths[i],
                        quality: 1,
                        success(res) {
                            console.log(res,'===compressImage')
                            wx.getFileSystemManager().readFile({
                                filePath: res.tempFilePath, //选择图片返回的相对路径
                                encoding: "base64",//这个是很重要的
                                success: res => { //成功的回调
                                    if (that.fileList.length >= 2) {
                                        Toast.fail('最多上传两张');
                                        return;
                                    }
                                    //返回base64格式
                                    let base64_img = `data:image/png;base64,${res.data}`;
                                    wx.compressImage({// 图片压缩
                                        src: base64_img,
                                        quality: 30,
                                        success(res) {
                                            console.log(res)
                                        }
                                    })
                                    console.log(base64_img)
                                    Toast.success('图片上传成功');
                                    that.fileList.push(base64_img)
                                }
                            })
                        }
                }
                }
            })
        },
        //删除图片
        closeqmImg(index){
            this.fileListqm.splice(index,1);
        },
        // 图片压缩
        dealImage(res) {
            var that = this;
            console.log(res);
            wx.compressImage({// 图片压缩
                src: res.path,
                quality: 1,
                success(res) {
                    console.log(res)
                }
            })
        }

css样式

.van-popup--center{
    margin-top: 43px;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cellss{
    align-items:center;
}
.value-class {
  flex: none !important;
}
.van-field__label{
    color: #299cff !important;
}
.van-checkbox{
    height: 48px !important;
}
.shqm{
    display: block;
    margin: 16rpx auto;
    width: 92%;
    font-size: 15px;
    line-height: 31px;
    color: #299cff;
}
.uploadimg{
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 26px;
    color: #a2a4a5;
}
.h7{
    height: @h7;
    background: @bg_eee;
}
.agreement{
    width: @w90;
    height: 180px;
    margin: 12px auto 12px auto;
    border: 1px dashed #eee;
}
.idcard{
    display: block;
    margin: 14px auto;
    width: 91%;
    font-size: 17px;
    text-align: left;
    color: @color999;
}
.closeImg{
    position:absolute;
    width:17px;
    height:17px;
    background-color:rgba(0,0,0,.8);top:0;
    right:0;
    border-bottom-left-radius:57%;
    text-align: center;
    line-height: 17px;
}

.logoWrap{
    width: @w80;
    margin: 40px auto 50px auto;
    .loginTxt{
        font-size: 28px;
        color: @color4040;
        font-weight: bold;
        position: relative;
        margin: 17px 0 6px 0;
        z-index: 99;
    }
    .loginTxt::after{
        content: '';
        display: inline;
        width: 60px;
        height: 10px;
        background-color: #3a53aeba;
        position: absolute;
        bottom: 2px;
        left: -2px;
        z-index: 88;
    }
    .notxt {
        display: block;
        color: @color4040;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        a{
            display: inline-block;
            color: rgb(33, 70, 236);
            
        }
    }

}
.iptwrap,.signWrap{
    width: 88%;
    margin: @m_auto;
}

.btn{
    width: 88%;
    margin: 85px auto 40px auto;
    .forget{
        display: block;
        margin-top: 17px;
        text-align: center;
        color: @color4040;
        a{
            color: #2146ec;
            display: inline-block;
        }
    }
}
.countdownSpan{
    position: fixed;
    width: 28px;
    height: 28px;
    bottom: 240rpx;
    left: 10rpx;
    right: 0;
    background: #0B255B;
    color: #fff;
    display: block;
    z-index: 999999;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    padding: 11px;
    line-height: 16px;
}
.downBtn{
    position: fixed;
    bottom: 3px;
    left: 0;
    right: 0;
    z-index: 999999;
}