微信小程序多张图片上传

做项目需求要做一个评价上传图片，这里需要做多张图片上传，需要图片一张一张的上传然后在提交数据保存。还有我写这个博客呢也是方便以后项目用到直接搬，后面项目频繁使用会进行封装组件

思路

用递归的方法，在每一张图片上传完API返回图片服务器地址，用push函数添加到新数组，以此类推上传完成保存这个新数组即可

效果图

实现过程

这里的样式、布局和图片显示逻辑我用的是colorUI的表单组件 colorUI github地址：https://github.com/weilanwl/ColorUI

1.页面布局
view

 <view class="cu-bar bg-white margin-top">
    <view class="action">
        图片上传
    </view>
    <view class="action">
        {{imgList.length}}/4
    </view>
</view>
<view class="cu-form-group">
    <view class="grid col-4 grid-square flex-sub">
        <view class="padding-xs bg-img" style="background-image:url({{imgList[index]}})" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
            <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
                <text class="icon-close"></text>
            </view>
        </view>
        <view class="padding-xs solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
            <text class="icon-cameraadd"></text>
        </view>
    </view>
</view>

2.页面逻辑
页面逻辑参考:https://www.jianshu.com/p/45f8281f45bd 感谢！
如果项目多出使用可以封装成组件方便使用，因为我只有一处使用就不封装了！

const app = getApp();
Page({
    data: {
       imgList: [],
       fileImgList: [],
    },
    onLoad: function(options) {
        
    },
    ChooseImage() {//选择图片
        wx.chooseImage({
            count: 4, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: (res) => {
                if (this.data.imgList.length != 0) {
                    this.setData({
                        imgList: this.data.imgList.concat(res.tempFilePaths)
                    })
                } else {
                    this.setData({
                        imgList: res.tempFilePaths
                    })
                }
            }
        });
    },
    ViewImage(e) {//查看图片
        wx.previewImage({
            urls: this.data.imgList,
            current: e.currentTarget.dataset.url
        });
    },
    DelImg(e) {//删除图片
        this.data.imgList.splice(e.currentTarget.dataset.index, 1);
        this.setData({
            imgList: this.data.imgList
        })
    },
    Submission(e){
    	var then = this
        var imgList = then.data.imgList
		then.uploadimg({
            url: app.globalData.appUrl//API接口地址
           	path: imgList,
        });
    },
   	uploadimg: function(data) {
       var then = this,
           i = data.i ? data.i : 0,
           success = data.success ? data.success : 0,
           fail = data.fail ? data.fail : 0;

       wx.showLoading({
           title: '上传中...',
           mask: true,
       })
       wx.uploadFile({
           url: data.url,
           filePath: data.path[i],
           name: 'img',
           formData: 'null',
           success: function(res) {
               wx.hideLoading();
               success++;
               var str = res.data //返回的结果，可能不同项目结果不一样
               var pic = JSON.parse(str);
               var pic_name = pic.img;
               var fileImgList = then.data.fileImgList;
               fileImgList.push(pic_name)//上传后返回的图片地址组成新数组 提交数据时提交
           },
           fail: function(res) {
               fail++;
               console.log('fail:' + i + "fail:" + fail);
           },
           complete: function(res) {
               i++;
               if (i == data.path.length) {
               		//图片传完，则继续调用函数提交内容和图片地址数组保存
                   then.uploadForm()
               } else { //若图片还没有传完，则继续调用函数
                   data.i = i;
                   data.success = success;
                   data.fail = fail;
                   then.uploadimg(data);
               }
           },
       })
   	},

})