微信小程序form表单提交

1、wxml部分

<!--pages/zizhushangbao/zizhushangbao.wxml--><form bindsubmit="formSubmit" bindreset="formReset" class="form"><view class="section section_gap"><view class="section__title"><i style="color:red;">*</i>标题</view><input name="title" bindinput="bindInput" placeholder="标题" placeholder-style=" line-height:72rpx" /></view><view class="section section_gap"><view class="section__title">类型</view><picker bindchange="bindPickerChange" mode:value="{{typeIndex}}" range-key="value" range="{{type}}"><view class="picker">{{type[typeIndex].value}}</view></picker></view><view class="section section_gap"><view class="section__title"><i style="color:red;">*</i>内容</view><textarea bindinput="bindTextAreaInput" auto-height placeholder="内容" /></view><view class="section section_gap"><view class="section__title">图片</view><view class="recode_upload_item"><view><image wx:for="{{imgs}}" src="{{item}}" alt="" /></view><text class=" iconfont icon-zengjia" bindtap="chooseImg">+</text></view></view><button class="btn" bindtap="submit">提交</button>
</form>

2、json

{"usingComponents": {},"navigationBarTitleText": "自主上报"
}

3、wxss

/* pages/zizhushangbao/zizhushangbao.wxss */
.form{ width: 100%; padding: 30rpx 3%; box-sizing: border-box; display: block;}
.btn{ display: block; width: 100%; background: #1989F7; text-align: center; margin-top: 40rpx; height:72rpx; line-height: 72rpx; border-radius: 10rpx; color: #fff; font-size: 32rpx;}
.section{ width: 100%; height: auto; margin-bottom: 20rpx;}
.section>view{ width: 100%; height: 50rpx; line-height: 50rpx; font-size: 28rpx;}
.section>text,.section>input,.section>picker{ display: block; width: 100%; height: 60rpx; line-height: 60rpx; background: #fff; border-radius: 10rpx; padding: 0 20rpx; box-sizing: border-box; border: none;}
.section>textarea{ display: block; width: 100%; min-height: 120rpx; line-height: 50rpx; background: #fff; border-radius: 10rpx; padding: 10rpx 20rpx; box-sizing: border-box; border: none;}
.icon-zengjia{ display: block; width: 200rpx; height: 200rpx; border: 1px dashed #ddd; text-align: center; line-height: 200rpx; font-size: 80rpx; background: #fff; color: #888;}
.section>view.recode_upload_item{ width: auto; height: auto;}
.recode_upload_item>view{ width: 100%; height: auto; overflow: hidden;}
.recode_upload_item>view image{ display: block; width: 200rpx; height: 200rpx; float: left; margin: 0 20rpx 20rpx 0;}
.section__title{ color: #888; font-size: 26rpx;}

4、js

// pages/zizhushangbao/zizhushangbao.js
import {selfReport} from "../../api/api"
const config = require('../../config.js')Page({/*** 页面的初始数据*/data: {title: "",content: "",type: [{keys: 1,value: "意见反馈"}, {keys: 2,value: "其他"}, ],typeIndex: 0,imgs: [], //上传图片列表imgUrls: [], //已上传成功的图片路径},submit() {if(!this.data.title){wx.showToast({title:"标题不能为空",icon:"none"})return}if(!this.data.content){wx.showToast({title:"内容不能为空",icon:"none"})return}selfReport({title:this.data.title,type:Number(this.data.typeIndex)+1,content:this.data.content,imgUrls:this.data.imgUrls}).then(res=>{wx.showToast({title:"提交成功",icon:"none"})wx.navigateTo({url: '/pages/zizhushangbao_list/zizhushangbao_list',})})},bindInput(e){this.setData({title: e.detail.value})},bindPickerChange(e) {this.setData({typeIndex: e.detail.value})// console.log(this.data.typeIndex, 11)},bindTextAreaInput(e){this.setData({content: e.detail.value})},// 上传照片chooseImg(e) {const _this = this;let imgs = this.data.imgs;let imgNumber = this.data.imgs.length; //当前已上传的图片张数if (imgNumber >= 3) {wx.showToast({title:"最多只能上传三张图片！",icon:"none"})return false;} else {imgNumber = 3 - imgNumber;};wx.chooseImage({ //打开本地相册选择图片count: imgNumber,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {const tempFilePaths = res.tempFilePaths;for (let i = 0; i < tempFilePaths.length; i++) {imgs.push(tempFilePaths[i]);}_this.setData({ //赋值，回显照片imgs: imgs});let successUp = 0; //成功let failUp = 0; //失败let count = 0; //第几张let length = tempFilePaths.length; //总数_this.recursionUploading(tempFilePaths, successUp, failUp, count, length); //调用上传方法}})},//采用递归的方式上传图片recursionUploading(imgPaths, successUp, failUp, count, length) {let token = wx.getStorageSync('token');var _this = this;wx.showLoading({title: '正在上传第' + (count+1) + '张',});wx.uploadFile({url: `${config.host}/oss/upload`,filePath: imgPaths[count],// formData: {//     userId: app.globalData.userMsg.userId// },name: "file",header: {'content-type': 'application/json',Authorization: token},success(e) {console.log(e)let path = _this.data.imgUrls;let obj = JSON.parse(e.data);if (obj.code ==200) {path.push(obj.data);_this.setData({imgUrls: path});console.log(_this.data.imgUrls,1212121)}successUp++; //成功+1},fail(e) {// failUp++; //失败+1},complete(e) {count++; //下一张if (count == length) {wx.showToast({title: '上传成功',})} else {//递归调用，上传下一张_this.recursionUploading(imgPaths, successUp, failUp, count, length);}}})},// 预览大图lookBigImg(e) {let index = e.currentTarget.dataset.index; //索引let big = this.data.imgs[index];wx.previewImage({current: big, // 当前显示图片的http链接urls: this.data.imgs // 需要预览的图片http链接列表})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序form表单提交相关推荐

小程序提交表单mysql_微信小程序form表单提交到MYSQL实例（PHP）
小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的 ...
微信小程序form表单提交到MYSQL实例详解(PHP)
1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSO ...
微信小程序form表单提交到数据库
1.小程序目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html 2 ...
微信小程序Form表单提交按钮获取不到表单数据
问题描述:再写微信小程序的一个案例时,bindsubmit绑定事件后,事件对象e.detail.value中的值是个空对象!!! 代码实现: // index.wxml <form action ...
微信小程序-form表单提交
效果 html代码 <form bindsubmit="formSubmit" bindreset="formReset"><view cla ...
微信小程序表单数据提交服务器,微信小程序-form表单提交
效果 image html代码是否公开信息手机号密码性别男女提交重置 {{warn ? warn : "是否公开信息:"+isPub+",手机号:&quo ...
【微信小程序】表单提交验证及获取表单输入的值
效果图: 说明:请选择房屋所在城市的效果是省市区选择器,刚开始我们可能直接在picker选择器中直接包含一个input输入框实现,但是这样的话点击选择的话可能聚焦在输入框中,我们想要的效果是点击的时候 ...
微信小程序 form表单验证
业务需求:微信小程序提交表单的时候必填的项要提示,还要电话要校验首页,先搞一个校验的公共方法 validate.js /*** 表单验证* * @param {Object} rules 验证字段的 ...
微信小程序form表单Cannot read property ‘detail‘ of undefined原因之一
我利用form表单打算提交两个input框的内容,并在form的提交函数loginContainer里将input值赋给两个变量,如下图所示,在点击form button后出现了detail unde ...

微信小程序form表单提交

1、wxml部分

2、json

3、wxss

4、js

微信小程序form表单提交相关推荐

最新文章

热门文章