使用微信小程序API(wx.chooseImage)实现页面选择图片和拍照，选择后页面显示预览图，再通过小程序API(wx.uploadFile)实现图片上传，其中包括uploadOneByOne递归方式上传多张图片。

效果截图：

WXML代码：

<view class="container">

  <view class="supplement-report-pic">

    <view class="report-pic-item" wx:for="{{previewArr}}" wx:key="*this">
      <image src="{{item}}"></image>
      <view class="pic-item-close" data-pic="{{item}}" bindtap="delReportPic">
        <image src="../../resources/img/icon/supplement_report_close_ico.png"></image>
      </view>
    </view>

    <view class="report-pic-item" bindtap="chooseClientPic">
      <image src="../../resources/img/icon/supplement_report_add_ico.png"></image>
    </view>

    <view class="clearfix"></view>
  </view>

  <view class="supplement-report-operat">
    <button form-type="submit" class="btn-platform" bindtap="uploadReportPic">确定上传</button>
  </view>

</view>

WXSS代码：

.supplement-report-pic{
  width: 90%;
  margin: 0rpx auto;
  padding: 10% 0%;
}
.report-pic-item{
  width: calc(33.33% - 10rpx);
  float: left;
  margin: 0rpx 0rpx 5rpx 0rpx;
  position: relative;
}
.report-pic-item:nth-child(2),.report-pic-item:nth-child(5),.report-pic-item:nth-child(8){
  margin: 0rpx 15rpx 5rpx 15rpx;
}
.report-pic-item>image{
  width: 100%;
  height: 200rpx;
}
.pic-item-close{
  position: absolute;
  right: 5rpx;
  top: 5rpx;
}
.pic-item-close image{
  width: 46rpx;
  height: 46rpx;
}
.supplement-report-operat{
  width: 90%;
  margin: 0rpx auto;
}
.supplement-report-operat button{
  border-radius: 50rpx;
  font-size: 32rpx;
  margin: 0rpx 0rpx 15rpx 0rpx;
}
.supplement-report-operat view{
  font-size: 28rpx;
  color: rgba(185, 186, 187, 1);
}

JS代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    previewArr: [], // 保存选择的图片
    uploadBackFile: '' // 上传成功服务器接口返回的文件地址
  },

  /**
   * 删除上传图片
   */
  delReportPic: function (options) {
    let that = this;
    let pic = options.currentTarget.dataset.pic;
    let previewArrs = that.data.previewArr;
    that.removeArrElement(pic);
    that.setData({
      previewArr: previewArrs
    })
  },

  /**
   * 删除指定元素
   */
  removeArrElement: function (val) {
    let that = this;
    let previewArrs = that.data.previewArr;
    var index = previewArrs.indexOf(val);
    if (index > -1) {
      previewArrs.splice(index, 1);
    }
  },

  /**
   * 选择图片
   */
  chooseClientPic: function () {
    let that = this;
    wx.chooseImage({
      count: 9 - that.data.previewArr.length,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        let tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
          that.setData({
            previewArr: that.data.previewArr.concat(tempFilePaths)
          })
        } else {
          that.setData({
            previewArr: tempFilePaths
          })
        }
      }
    });
  },

  /**
   * 上传
   */
  uploadReportPic: function () {
    let that = this;
    let imgArr = that.data.previewArr;
    if (imgArr.length > 0) {
      // 成功个数
      var successUp = 0;
      // 失败个数
      var failUp = 0;
      // 文件总数
      var length = imgArr.length + 1;
      // 第几张
      var count = 1; 
      // 上传函数
      that.uploadOneByOne(imgArr, successUp, failUp, count, length);
    } else {
      common.showToast('请选择要上传的内容');
      return false;
    }
  },

  /**
  * 采用递归的方式上传多张
  */
  uploadOneByOne: function (imgPaths, successUp, failUp, count, length) {
    let that = this;
    wx.showLoading({
      title: '正在上传第' + count + '张',
    })
    wx.uploadFile({
      url: '接口地址',
      filePath: imgPaths[count - 1],
      name: 'files', // 服务器对于文件类型
      formData: { 'directory': 'report' }, // 其他参数
      success: function (res) {
        successUp++;
      },
      fail: function (res) {
        failUp++;
      },
      complete: function (res) {
        // 下一张
        count++;
        if (count == length) {
          wx.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 2000
          });
        } else {
          // 递归调用，上传下一张
          that.uploadOneByOne(imgPaths, successUp, failUp, count, length);
        }
      }
    });
  }
})