微信小程序 云开发 上传多张图片 9宫格

直接看录屏（有语音说明）

微信小程序开发

如果播放失败请 点击此处跳转腾讯视频

show me the code

<view class="img-view">
	<view class="show" wx:for="{{ imgOne }}" wx:key="_id">
		<image src="{{ item }}" mode="aspectFill" data-index="{{index}}" bindtap="previewImg">image>
		<image class="del-img" src="../../images/icons/close.png" data-index="{{index}}" bindtap="reBackImg">image>
	view>
	<view class="up" wx:if="{{imgOneSwitch}}" bindtap="onChooseOne">+view>
view>

<button class="onSavebut" bindtap="onSave">发布button>

/* 上传图片 */
.img-view {
	width: 710rpx;
	margin: 20rpx 20rpx;
	/* background-color: red; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.img-view .up, .img-view .show {
	margin: 6rpx;
}

.img-view .up {
	height: 220rpx;
	width: 220rpx;
	background-color: #ededed;
	line-height: 200rpx;
	text-align: center;
	font-size: 100rpx;
	color: #bfbfbf;
}

.img-view .show {
	width: 220rpx;
	height: 220rpx;
	/* background-color: red; */
	position: relative;
}

.del-img {
	position: absolute;
	top: 0rpx;
	right: 0rpx;

	box-sizing: border-box;
	padding: 8rpx;

	background-color: #fff;
	border-bottom-left-radius: 10rpx;

	height: 50rpx !important;
	width: 50rpx !important;
	z-index: 9998;
}

.img-view .show image {
	width: 100%;
	height: 100%;
}

.onSavebut {
	width: 300rpx;
	color: #fff;
	background-color: #07C160;
}

Page({
	data: {
		imgOneSwitch: true,
		imgOne: [],
		MAXCOUNTIMAGE: 9,
	},

	onLoad: function (options) {
	},

	// 保存到 存储 & 数据库
	onSave: function () {
	
		if (this.data.imgOne.length == 0) {
			wx.showToast({
				title: '请添加图片',
				icon: 'none'
			})
			return
		}

		console.log('通过 ---空--- 校验')

		wx.showToast({
			title: '上传图片中',
			icon: 'loading',
			duration: 30000,
			mask: true
		})

		this.OnUpImg()

	},

	OnUpImg: function () {
		let promiseArr = []
		let fileIds = []     // 将图片的fileId存放到一个数组中
		let imgLength = this.data.imgOne.length;

		// 图片上传
		for (let i = 0; i < imgLength; i++) {
			let p = new Promise((resolve, reject) => {
				let item = this.data.imgOne[i]
				let suffix = /\.\w+$/.exec(item)[0]
				
				wx.cloud.uploadFile({    
					cloudPath: 'testdir/' + Date.now() + '-' + Math.random() * 1000000 + suffix, 
					filePath: item,
					success: (res) => {
						console.log(res);
						// console.log(res.fileID)
						fileIds = fileIds.concat(res.fileID)       // 拼接
						resolve()
					},
					fail: (err) => {
						console.error(err)
						reject()
					}
				})
			})
			promiseArr.push(p)
		}

		Promise.all(promiseArr)
			.then((res) => {
				this.addtoDB(fileIds)
			})
			.catch((err) => {
				console.error(err)       // 上传图片失败

				wx.showToast({
					title: '上传失败 请再次点击发布',
					icon: 'none',
					duration: 3000
				})
			})

	},

	addtoDB: function (fileIds) {
		wx.showToast({
			title: '发布中...',
		})
	},

	// 选择图片 + 回显 
	onChooseOne: function () {
		let that = this
		wx.chooseImage({
			count: this.data.MAXCOUNTIMAGE - this.data.imgOne.length,
			// sizeType: ['compressed','original'],
			sourceType: ['album', 'camera'],
			sizeType: ['compressed'],
			// sourceType: ['album'],
			success(res) {
				console.log(res)

				let tempArr = that.data.imgOne.concat(res.tempFilePaths)

				that.setData({
					'imgOne': tempArr
				})

				if (that.data.imgOne.length >= that.data.MAXCOUNTIMAGE) {
					that.setData({
						imgOneSwitch: false
					})
				}
			}
		})
	},

	// 删除图片功能
	reBackImg: function (e) {
		let dataset = e.currentTarget.dataset
		let index = dataset.index
		console.log(index)

		let arr = this.data.imgOne
		arr.splice(index, 1)

		if (arr.length < this.data.MAXCOUNTIMAGE && this.data.imgOneSwitch === false) {
			this.setData({
				imgOneSwitch: true
			})
		}

		this.setData({
			imgOne: arr
		})
	},

	// 预览图片
	previewImg: function (e) {
		console.log('放大图片')

		let index = e.currentTarget.dataset.index
		let item = this.data.imgOne[index]

		console.log(item)

		wx.previewImage({
			current: item, // 当前显示图片的http链接
			urls: this.data.imgOne // 需要预览的图片http链接列表
		})
	},

})

注意要在 云开发控制台 -> 云存储 新建 testdir 文件夹

---

喜欢或对你有帮助，请点个赞吧 。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

---

END

---