uniapp多图片上传

<template>
	<view class="Account">
		<view class="isgg">
			图片仅支持jpg、jpeg、bmp格式，大小不超过2M
		</view>
		<view class="onsanimg" @click="upload()" v-for="(item,index) in uploaderList1" :key="index">
			<image :src="item" class="img" mode=""></image>
		</view>
		<view class="onsanimg" @click="upload()" v-if="showUpload1">
			<image src="../../static/img/zm.jpg" class="img" mode=""></image>
		</view>
		<view class="ascnam">
			上传身份证/护照 正面照片
		</view>
		<view class="onsanimg" @click="upload1()" v-for="(item,index) in uploaderList2" :key="item">
			<image :src="item" class="img" mode=""></image>
		</view>
		<view class="onsanimg" @click="upload1()" v-if="showUpload2">
			<image src="../../static/img/fm.jpg" class="img" mode=""></image>
		</view>

		<view class="ascnam">
			上传身份证/护照 反面照片
		</view>
		<view class="onsanimg" @click="upload2()" v-for="(item,index) in uploaderList3" :key="index + item">
			<image :src="item" class="img" mode=""></image>
		</view>
		<view class="onsanimg" @click="upload2()" v-if="showUpload3">
			<image src="../../static/img/sc.jpg" class="img" mode=""></image>
		</view>

		<view class="ascnam">
			上传一张手持证件信息的照片
		</view>
		<button type="default" @click="submit()" class="buttonys">提交</button>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/gsq-image-tools/image-tools/index.js';
	export default {
		data() {
			return {
				uploaderList1: [],
				uploaderNum1: 0,
				showUpload1: true,
				isakwnadls1: '',
				uploaderList2: [],
				uploaderNum2: 0,
				showUpload2: true,
				isakwnadls2: '',
				uploaderList3: [],
				uploaderNum3: 0,
				showUpload3: true,
				isakwnadls3: '',
			}
		},
		created() {

		},
		methods: {
			// 提交认证
			submit() {
				// if (this.isakwnadls1 == '' || this.isakwnadls2 == '' || this.isakwnadls3 == '') {
				// 	uni.showToast({
				// 		title: '请提交照片。',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.http.post('接口', {
					idcard_img1: this.isakwnadls1,
					idcard_img2: this.isakwnadls2,
					idcard_img3: this.isakwnadls3,
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							})
						},500)
					} else {
						uni.showToast({
							title: '提交失败',
							icon: 'none'
						})
					}
				})
			},
			// 上传图片
			upload: function(e) {
				var that = this;
				uni.chooseImage({
					count: 1 - that.uploaderNum1, // 默认1
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let uploaderList = res.tempFilePaths;
						// let uploaderList = that.uploaderList.concat(tempFilePaths);
						// 图片的长度 就隐藏那个按钮
						if (uploaderList.length == 1) {
							that.showUpload1 = false
						}
						that.uploaderList1 = uploaderList
						that.uploaderNum1 = uploaderList.length
						pathToBase64(that.uploaderList1[0]).then(resbase => {
							that.imagehttp.post('j接口', {
								base64_string: resbase
							}).then(res => {
								that.isakwnadls1 = res.data.data
							})
						}).catch(error => {
							console.error(error)
						})
						
					}
				})
			},
			upload1: function(e) {
				var that = this;
				uni.chooseImage({
					count: 1 - that.uploaderNum2, // 默认1
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let uploaderList = res.tempFilePaths;
						// let uploaderList = that.uploaderList.concat(tempFilePaths);
						// 图片的长度 就隐藏那个按钮
						if (uploaderList.length == 1) {
							that.showUpload2 = false
						}
						that.uploaderList2 = uploaderList
						that.uploaderNum2 = uploaderList.length
						pathToBase64(that.uploaderList2[0]).then(resbase => {
							that.imagehttp.post('j接口e', {
								base64_string: resbase
							}).then(res => {
								that.isakwnadls2 = res.data.data
							})
						}).catch(error => {
							console.error(error)
						})
					}
				})
			},
			upload2: function(e) {
				var that = this;
				uni.chooseImage({
					count: 1 - that.uploaderNum3, // 默认1
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let uploaderList = res.tempFilePaths;
						// let uploaderList = that.uploaderList.concat(tempFilePaths);
						// 图片的长度 就隐藏那个按钮
						if (uploaderList.length == 1) {
							that.showUpload3 = false
						}
						that.uploaderList3 = uploaderList
						that.uploaderNum3 = uploaderList.length
						// uni.request({
						// 	url: that.uploaderList3[0],
						// 	method: 'GET',
						// 	responseType: 'arraybuffer',
						// 	header: {
						// 		token: uni.getStorageSync('token')
						// 	},
						// 	success: ress => {
						// 		let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
						// 		base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
						// 		that.http.post('接口e', {
						// 			base64_string: base64
						// 		}).then(res => {
						// 			console.log(res)
						// 			that.isakwnadls3 = res.data.data
						// 			console.log(that.isakwnadls3)
						// 		})
						// 	}
						// })
						
						pathToBase64(that.uploaderList3[0]).then(resbase => {
							that.imagehttp.post('j接口e', {
								base64_string: resbase
							}).then(res => {
								that.isakwnadls3 = res.data.data
							})
						}).catch(error => {
							console.error(error)
						})
					}
				})
			},
		}
	}
</script>

<style>
	.Account {
		padding: 20rpx 60rpx;
		box-sizing: border-box;
	}

	button.buttonys {
		background: #0264ED;
	}

	.buttonys {
		border-radius: 10rpx;
		background: #0264ED;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.isgg {
		text-align: center;
		margin-top: 30rpx;
		font-size: 26rpx;
		line-height: 60rpx;
		color: #676975;
	}

	.onsanimg {
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
	}

	.ascnam {
		text-align: center;
		font-size: 24rpx;
		padding-top: 10rpx;
		color: #8C9FAD;
	}

	.img {
		width: 40%;
		height: 144rpx;
	}
</style>