Hbuilder中微信小程序上传多图的案例分享

1、实现效果图如下：

 描叙：最后那个加号+是上传图片的按钮。每张图片右上角有删除按钮。

我这里限定每行显示三张图片。

2、具体代码如下：

页面data()中定义一个待上传图片的数组变量 tempFiles:[],：

页面View内容：

<view class="car-list">
					<view class="car-item" v-for="(item2, index2) in tempFiles" :key="index2">
						<view :style="{'background-image':'url('+item2.tempFilePath+')','background-repeat':'no-repeat','background-size':'98px 98px'}">
							<image src="/static/img/c/delete.png" mode="aspectFit" class="deleteImg" @click="deleteCarPhoto(index2)"></image>
						</view>
					</view>
					<view class="car-item">
						<view style="background-image:url('/static/img/personal/add.png');background-repeat:no-repeat;background-size:98px 98px;" @tap="selectCarPhoto()">
						</view>
					</view>
				</view>

car-list 下最后一个car-item 是我们的上传图片添加按钮。

v-for 循环 tempFiles 图片。

methods z中定义添加图片和删除图片的方法：

//添加图片
selectCarPhoto(){
    wx.chooseMedia({
	    count: 5,
        mediaType: ['image'],
		sourceType: ['album', 'camera'],
		maxDuration: 30,
		camera: 'back',
		success: (res) => {
			console.log("选择图片成功："+JSON.stringify(res));
			if(res.errMsg=="chooseMedia:ok"){
				this.tempFiles=this.tempFiles.concat(res.tempFiles);
			}else{
				uni.showToast({
					title: res.errMsg,
					icon: "none",
					position: 'center',
					duration: 3000
					});
				}
			},fail: (res) => {
	            console.log("选择图片失败："+res.errMsg);
            }
    })
},
//删除图片
deleteCarPhoto(index){
    this.tempFiles.splice(index,1);
},

3、页面的CSS样式(此处样式可以根据自己需求进行调整)

<style>
.car-list{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-top:10px;
}
.car-item {
  flex: 1;
  text-align: center;
  margin: 0 10px 10px 0;
  box-sizing: border-box;
}
.car-item view{
	width:100px;
	height: 100px;
}
.car-item:nth-child(3n + 3) {
	margin-right: 0;
}
.deleteImg {
	width: 40rpx !important;
	height: 40rpx !important;
	margin-left: 70px;
}
</style>

4、微信上传文件的方法

注：wx.uploadFile 方法需要小程序设置，上传文件合法域名才可使用。本地测试时，微信开发者工具可以选择不校验合法域名。

uploadCarPhoto(carId){
				//上传
				console.log("开始上传图片");
				uni.showLoading({
				  title: '正在上传车辆图片中......'
				});
				var fileLength=this.tempFiles.length;
//这个参数是我自定义的,为了最后确定是否都上传完毕，因为微信官方文档并没有多图上传功能
				var orderNum=0;
				for (var i = 1; i <= this.tempFiles.length; i++) {
					let tempFilePath = this.tempFiles[i-1].tempFilePath;
					wx.uploadFile({
						url: Common.PROJECT_URL+'/context/XXX/uploadCarPhoto', 
						filePath: tempFilePath,
						name: 'car_file',
						formData: {
							param1: carId,
							orderNum: i
						},
						success(res) {
							orderNum=orderNum+1;
							if(res.statusCode==200){
								var ret=JSON.parse(res.data);
								if (ret.code == 1) {
									if(orderNum==fileLength){
										uni.hideLoading();
										wx.showToast({
											title: '保存成功',
											duration: 2000
										});
										uni.reLaunch({
											url:"/pages/index/index"
										});
									}
								}else{
									uni.hideLoading();
									uni.showToast({
										title: ret.message,
										icon: "none",
										position: 'bottom',
										duration: 3000
									});
								}
							}else{
								uni.hideLoading();
								uni.showToast({
									title: res.errMsg,
									icon: "none",
									position: 'bottom',
									duration: 3000
								});
							}
						}
					});
				}
			}

关于微信小程序多图上传，各位大佬还有没有更好的方式呢？欢迎评论区留言，我们共同探讨。