vant 图片上传 多图上传

本文主要是介绍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;
}

这篇关于vant 图片上传 多图上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---