uni-app —— 小程序自定义封装支持多图上传（支持图片压缩功能）

最近在使用uni-app的上传功能时，发现目前只有APP端支持多张图一起上传，而小程序不支持，于是自己动手封装一下支持一次上传多张图片。

原理：其实底层还是一张图片一张图片上传，只是获取的时候可以一次获取多张，然后写代码自动依次处理这多张图片上传，即把图片多次上传的麻烦手动过程给自动化了。

 

/* 监听图片变化 */
imgListChange(data) {
			
    this.imgList = [...data];
		
},

css代码

.container {
	.canvas-view {
		opacity: 0;
		position: fixed;
		right: -10000px;
		bottom: -10000px;
		width: 0px;
		height: 0px;
		overflow: hidden;
	}
	.list-box {
		display: flex;
		flex-wrap: wrap;
		.item {
			position: relative;
			width: 127rpx;
			height: 127rpx;
			border-radius: 4rpx;
			margin: 0rpx 13rpx 13rpx 0rpx;
			border:1px solid #EDEDED;
			.img {
				display: block;
				width: 100%;
				height: 100%;
			}
			.del-btn {
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				background-color: #BA1C22;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 50%;
			}
		}
		.add-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 127rpx;
			height: 127rpx;
			border-radius: 4rpx;
			background-color: #FAFAFA;
			border:1px solid #EDEDED;
			text-align: center;
			.icon {
				color: #CCCCCC;
				font-size: 38rpx;
				line-height: 38rpx;
			}
			.txt {
				margin-top: 12rpx;
				display: block;
				font-size: 22rpx;
				font-weight: 400;
				color: #CCCCCC;
				line-height: 32rpx;
			}
			
			
		}
	}
}