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
                                });
                            }
                        }
                    });
                }
            }

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