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 = thisvar flog = that.data.flogif (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.valuedb.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;}
结果：
