微信小程序 云开发 提交表单数据和表单里上传的多张图片一起提交到数据库里完整代码

JS代码：

  const db = wx.cloud.database()
  Page({
    data: {
      xingming: '',
      xingbie: '',
      aihao: [],
      flog: true,
      imageList: [],
    },
    formSubmit: function (e) {
      console.log("ad", e.detail.value);
      var that = this
      var flog = that.data.flog
      if (e.detail.value.xingming.length == 0) {
        wx.showToast({
          title: '姓名不能为空!',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else if (e.detail.value.xingbie.length == 0) {
        wx.showToast({
          title: '性别不能为空!',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else if (e.detail.value.aihao.length == 0) {
        wx.showToast({
          title: '爱好不能为空!',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.hideToast()
        }, 2000)
      } else if (flog) {
        wx.showModal({
          title: '提示',
          content: '你确定要提交吗',
          success: function (res) {
            console.log("obj", res)
            if (res.confirm) {
              that.issueNotice(e);

              console.log('用户点击确定')
            } else {
              console.log('用户点击取消')
            }
          }
        })
      } else {
        wx.showToast({
          title: '你已经提交过啦',
          icon: 'none',
          duration: 2000
        })
      }
    },
    issueNotice(e) {
      var that = this;
      var imgeList = that.data.imageList.concat(e.tempFilePaths);
      let {
        xingming,
        xingbie,
        aihao,
      } = e.detail.value
      db.collection("form").add({
        data: {
          "xingming": xingming,
          "xingbie": xingbie,
          "aihao": aihao,
          "imageList": imgeList
        },
        success: function (res) {
          console.log(res)
          wx.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 1500
          })
          that.setData({
            flog: false,
          })
        }
      })
    },
    chooseImage: function (event) {
      var that = this;
      wx.chooseImage({
        count: 2, // 一次最多可以选择2张图片一起上传
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.log(res)
          var imgeList = that.data.imageList.concat(res.tempFilePaths);
          that.setData({
            imageList: imgeList
          });
        }
      })
    },
    
    previewImage: function (e) {
      var that = this;
      var dataid = e.currentTarget.dataset.id;
      var imageList = that.data.imageList;
      wx.previewImage({
        current: imageList[dataid],
        urls: this.data.imageList
      });
    },
  })

WXML 代码

<form bindsubmit="formSubmit">
  <view class="section">
    <view class="section__title">姓名</view>
    <input type="number" name="xingming" placeholder="请输入姓名" />
  </view>
  <view class="section section_gap">
    <view class="section__title">性别</view>
    <radio-group name="xingbie">
      <label>
        <radio value="男" />男</label>
      <label>
        <radio value="女" />女</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">爱好</view>
    <checkbox-group name="aihao">
      <label>
        <checkbox value="写代码" />写代码</label>
      <label>
        <checkbox value="玩游戏" />玩游戏</label>
      <label>
        <checkbox value="改代码" />改代码</label>
      <label>
        <checkbox value="玩代码" />玩代码</label>
    </checkbox-group>
  </view>
  <view class="weui">
  <view class="weui-uploader">
      <view class="weui-uploader__files">
        <block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'>
          <view class="weui-uploader__file">
            <image class="weui-uploader__img" src="{{image}}" data-id="{{idx}}" data-src="{{image}}" bindtap="previewImage"></image>
          </view>
        </block>
      </view>
      <view class="weui-uploader__input-box">
        <view class="weui-uploader__input" bindtap="chooseImage"></view>
      </view>
  </view>
  </view>
  <view class="btn-area">
    <button formType="submit">提交</button>
    <button formType="reset">重置</button>
  </view>
</form>

WXSS代码

.weui{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  
}
.weui-uploader{
  padding: 0px 0px 9px;
}
.weui-uploader__file {
  float: left;
  margin-right: 5.5rpx;
  margin-top: 19rpx;
}
.weui-uploader__img {
  display: block;
  width: 158rpx;
  height: 158rpx;
}
.weui-uploader__file_status {
  position: relative;
}
.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right:5rpx;
  margin-top: 19rpx;
  width: 154rpx;
  height: 154rpx;
  border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}
.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}
.weui-uploader__input-box:active {
  border-color: #999;
}
.weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after {
  background-color: #999;
}
.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.btn_Suspension {
  position: fixed;
  height: 100rpx;
  width: 100rpx;
  background-color: rgba(79, 82, 81, 0.24);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

结果：