mui 上传图片

html

<div id="" class="upimg">
	<p class="colorF">上传照片:</p>
	<div id="imagesArea" class="liimg">
		<span class="picture">
			<img src="../../img/deviceList_1.png">
		</span>
		<div id="upbtn" class="upbtn"></div>
		<div id="fillBox" style="width:1.6rem;height:1.6rem;"></div>
	</div>
</div>


<div class="btn" id="submitBtn">
提交</div>

css

.upimg .liimg{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0.2rem;
}
.upimg .liimg .picture {
	position: relative;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.2rem;
}
.upimg .liimg .picture .delete {
	position: absolute;
	right: -0.2rem;
	top: -0.2rem;
	width: 0.5rem;
	height: 0.5rem;
	line-height: 0.5rem;
	text-align: center;
	border-radius: 50%;
	background: rgba(0,0,0,0.1);
	color: #fff;
}
	
.upimg .liimg .picture .delete i {
	font-size: 0.42rem;
}
.upimg .liimg img{
	width: 1.6rem;
	height: 1.6rem;
	/* margin-top: 0.2rem; */
}
.upimg .liimg .upbtn{
	width: 1.6rem;
	height: 1.6rem;
	margin-top: 0.2rem;
	border: 2px dashed #00FFC2;
	border-radius: 16px;
	position: relative;
	/* margin-left: 0.2rem; */
}
.upimg .liimg .upbtn::after{
	content: '';
	width: 0.03rem;
	height: 0.6rem;
	background-color: #00FFC2;
	/* font-size: 1.5rem; */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #00FFC2;
}
.upimg .liimg .upbtn::before{
	content: '';
	width: 0.6rem;
	height: 0.03rem;
	background-color: #00FFC2;
	/* font-size: 1.5rem; */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #00FFC2;
}
 

js

//上传图片数组
var uploadImgList = []
// 图片显示区域的父盒子
var imagesArea = document.getElementById('imagesArea')
// 补空位的盒子
var fillBox = document.getElementById('fillBox')

// 上传图片方法 包括拍照、本地相册
function choosePhoto(event) {
	if (mui.os.plus) {
		var a = [{ title: '拍照' }, { title: '从手机相册选择' }];
		plus.nativeUI.actionSheet({
			// title: '修改头像',
			cancel: '取消',
			buttons: a
		}, function(b) {
			switch (b.index) {
				case 0:
				break;
 
				case 1: //拍照
				getImages(event);
			 	break;
 
				case 2: //打开相册  
				galleryImages(event);
				break;
 
				default:
				break;
			}
		}, false);
	}
}

//拍照  
function getImages(event) {
	var mobileCamera = plus.camera.getCamera();
	mobileCamera.captureImage(function(e) {
		upLoadFile(e).then(res => {
			if (res.code == 200) {
				drawImageOnPage(res.data)
			}
		})
	}, function(e) {
		console.log("er", err);
	}, function() {
		filename: '_doc/head.png';
	});
}

//本地相册选择   
function galleryImages(event) {
	plus.gallery.pick(function(a) {
		upLoadFile(a).then(res => {
			if (res.code == 200) {
				drawImageOnPage(res.data)
			}
		})
	}, function(err) {
		console.log("读取拍照文件失败: ", err);
	}, {
		filter: 'image'
	});
};

// 将上传成功的图片展示在页面上
function drawImageOnPage (imgPath) {
	let currentImgs = document.getElementsByTagName('img')
	let handleAreas = document.querySelectorAll('.picture')
	// 因为有一张无记录的图片 所以先判断有没有上传过图片
	if (currentImgs.length == 1) {
		let judge = currentImgs[0].src.indexOf('deviceList_1.png')
		if (judge != -1) { //一张图片都没上传过 先把无记录覆盖掉
			handleAreas[0].innerHTML = `
			<img src="${imgPath}">
			<span class="delete">
				<i class="mui-icon mui-icon-closeempty"></i>
			</span>
			`
			uploadImgList.unshift(imgPath)
		} else { //已经上传过图片 直接在前面加图片
			let span = document.createElement('span')
			span.setAttribute('class', 'picture')
			span.innerHTML = `
			<img src="${imgPath}">
			<span class="delete">
				<i class="mui-icon mui-icon-closeempty"></i>
			</span>
			`
			imagesArea.insertBefore(span, handleAreas[0])
			uploadImgList.unshift(imgPath)
			
			fillBox.style.display = 'none'
		}
	} else { //若已经上传过图片 直接加到最前面
		let span = document.createElement('span')
		span.setAttribute('class', 'picture')
		span.innerHTML = `
		<img src="${imgPath}">
		<span class="delete">
			<i class="mui-icon mui-icon-closeempty"></i>
		</span>
		`
		imagesArea.insertBefore(span, handleAreas[0])
		uploadImgList.unshift(imgPath)
		
		if (uploadImgList.length == 4 || uploadImgList.length == 7) {
			fillBox.style.display = 'block'
		} else {
			fillBox.style.display = 'none'
		}
		if (uploadImgList.length == 9) { //图片最多9张 移除上传按钮
			// 上传图片的按钮
			let upbtn = document.getElementById('upbtn')
			imagesArea.removeChild(upbtn)
		}
	}
	
	registrationEvent()
}
// 删除上传的图片
function registrationEvent () {
	let btns = document.querySelectorAll('.delete')
	for (let i=0;i<btns.length;i++) {
		// btns[i].setAttribute('data-index', i)
		btns[i].onclick = function () {
			// let index = btns[i].getAttribute('data-index')
			// 从数组中移除
			console.log('删除', i)
			uploadImgList.splice(i, 1)
			// 从页面移除
			let handleAreas = document.querySelectorAll('.picture')
			imagesArea.removeChild(handleAreas[i])
			registrationEvent()
			if (!uploadImgList.length) {
				let span = document.createElement('span')
				span.setAttribute('class', 'picture')
				span.innerHTML = '<img src="../../img/deviceList_1.png">'
				// 上传图片的按钮
				let upbtn = document.getElementById('upbtn')
				imagesArea.insertBefore(span, upbtn)
				
			} else if (uploadImgList.length == 1 || uploadImgList.length == 4 || uploadImgList.length == 7) {
				fillBox.style.display = 'block'
			} else if (uploadImgList.length == 8) {
				fillBox.style.display = 'none'
				let div = document.createElement('div')
				div.setAttribute('id', 'upbtn')
				div.setAttribute('class', 'upbtn')
				imagesArea.insertBefore(div, fillBox)
				uploadBtnEvent()
			} else {
				fillBox.style.display = 'none'
			}
		}
	}
}

// 上传图片按钮的点击事件
function uploadBtnEvent () {
	// 上传图片的按钮
	let upbtn = document.getElementById('upbtn')
	upbtn.addEventListener('tap', function () {
		mui.init();
		choosePhoto()
	})
}
uploadBtnEvent()

// 点击提交按钮
document.getElementById('sure').addEventListener('tap', function () {
	
console.log('上传图片',uploadImgList.join())
})