小程序表单提交(内含内容和图片的安全接口的使用)

18 篇文章 0 订阅
13 篇文章 0 订阅

小程序WXML

<form bindsubmit="formSubmit" class="form" bindreset="formReset">  
	<view class="learncontent"><textarea name="content" placeholder="分享你的体验~"></textarea></view>
	<view class='uploader-img  flex justify-content-start' wx:if="{{pics}}">
	  <view class='uploader-list' wx:for="{{pics}}" wx:key="item.length">
	      <image src='{{item}}' class="uploaditem" data-index="{{index}}" mode="widthFix" bindtap='previewImg1'/>
	      <image class='delete' data-index="{{index}}" src='/public/images/del.png' mode="widthFix" bindtap='deleteImg'/>
	  </view>
	</view>
    <view class='upAdd' bindtap='chooseImg'>+</view>
    <view class="btn-area">
		<button formType="submit" data-status='1' style="width:50%;color:#02B0EF">保存</button>
 		<button formType="submit" data-status='2' style="width:50%">发布</button>
 	</view>
</form>

小程序JS

// pages/learn/add.js
const app = getApp();
Page({

	/**
   * 页面的初始数据
   */
	data: {
		pics: [],
		//图片
		navH: '',
		imgfiles: ''
	},
	//提交数据
	formSubmit: function(e) {
		var that = this;
		if (e.detail.value.title == '') {
			wx.showToast({
				title: '请输入标题',
				icon: 'none',
				duration: 2000
			});
			return false;
		}
		if (e.detail.value.content == '') {
			wx.showToast({
				title: '请输入内容',
				icon: 'none',
				duration: 2000
			});
			return false;
		}
		if (e.detail.value.imgfiles == '') {
			wx.showToast({
				title: '请上传图片',
				icon: 'none',
				duration: 2000
			});
			return false;
		}
		wx.request({
			url: app.globalData.http + 'wechat/wechat/doaddlearn',
			data: {
				'title': e.detail.value.title,
				'content': e.detail.value.content,
				'create_id': app.globalData.userid,
				'imgfiles': that.data.imgfiles,
				'status': e.detail.target.dataset.status,
				's_id': that.data.serverid
			},
			header: {
				'content-type': 'application/json' // 默认值
			},
			success: function(res) {
				// console.log(app.globalData.userid);
				if (res.data.code) {
					wx.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					}) setTimeout(function() {
						wx.reLaunch({
							url: '/pages/learn/index'
						})
					},
					2000);
				} else {
					wx.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					})
				}
			}
		});
	},
	/**
   * 生命周期函数--监听页面加载
   */
	onLoad: function(options) {
		var that = this;
		console.log(options) that.setData({
			'navH': app.globalData.navHeight,
			'serverid': options.serverid,
			'company_name': options.title
		});
	},
	previewImg: function(e) {

		var index = e.target.dataset.index; //当前图片地址
		var imgArr = e.target.dataset.list; //所有要预览的图片的地址集合 数组形式
		wx.previewImage({
			current: imgArr[index],
			urls: imgArr,
		})
	},
	/**
   * 图片上传
   * 
   */

	//上传图片开始
	chooseImg: function(e) {
		var that = this,
		pics = this.data.pics;
		if (pics.length < 3) {
			wx.chooseImage({
				count: 9,
				// 最多可以选择的图片张数,默认9
				sizeType: ['original', 'compressed'],
				// original 原图,compressed 压缩图,默认二者都有
				sourceType: ['album', 'camera'],
				// album 从相册选图,camera 使用相机,默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
					var tempFilePaths = res.tempFilePaths;
					for (var i = 0; i < tempFilePaths.length; i++) {
						pics.push(tempFilePaths[i]);
					}
					that.setData({
						pics: pics
					});
					//上传接口
					var tempFilePaths = res.tempFilePaths;
					wx.uploadFile({
						url: app.globalData.http + 'wechat/wechat/uploadimg',
						filePath: tempFilePaths[0],
						name: 'file',
						success: function(res) {
							//打印
							var photofile = JSON.parse(res.data);
							console.log(photofile) if (photofile.errCode == 200) {
								that.setData({
									'imgfiles': that.data.imgfiles + app.globalData.http + '/public/upload/weixin/' + photofile.file + ';'
								});
							} else {
								wx.showToast({
									title: photofile.msg,
									icon: 'none',
									duration: 2000
								})
							}

						}
					});
				},
			});
		} else {
			wx.showToast({
				title: '最多上传9张图片',
				icon: 'none',
				duration: 3000
			});

		}
	},
	// 删除图片
	deleteImg: function(e) {
		var that = this;
		var pics = this.data.pics;
		var index = e.currentTarget.dataset.index;
		pics.splice(index, 1);
		console.log(pics) this.setData({
			pics: pics,
		})
	},
	// 预览图片
	previewImg1: function(e) {
		//获取当前图片的下标
		var index = e.currentTarget.dataset.index;
		//所有图片
		var pics = this.data.pics;
		wx.previewImage({
			//当前显示图片
			current: pics[index],
			//所有图片
			urls: pics
		})
	},
	navBack: function() {
		wx.switchTab({
			url: '/pages/learn/index',
		});
	},
	onShareAppMessage: function() {}
})

PHP

public function doaddlearn() {
	$data = input();
	$saveData = [];
	$saveData['content'] = $data['content'];
	$saveData['imgfiles'] = $data['imgfiles'];
	//验证内容
	$accessToken = $this - >gettoken();
	$url = "https://api.weixin.qq.com/wxa/msg_sec_check?access_token=".$accessToken;
	$examdata = json_encode(['content' = >$data['content']], JSON_UNESCAPED_UNICODE);
	$respon = $this - >curlRequest($url, 'post', $examdata);
	$respon = json_decode($respon, true);
	if ($respon['errcode'] == 87014) {
		return json(array('code' = >'', 'msg' = >'效验失败,内容含有违法违规内容')); //效验失败,内容含有违法违规内容
	}
	//验证图片
	$files = explode(';', $data['imgfiles']);
	$accessToken = $this - >gettoken();
	foreach($files as $k = >$v) {
		if (!empty($v)) {
			$url = "https://api.weixin.qq.com/wxa/img_sec_check?access_token=".$accessToken;
			$file_path = $_SERVER['DOCUMENT_ROOT']. (substr($v, 27)); //接受表单文件保存本地的文件地址
			$file_data = array("media" = >new\CURLFile($file_path));
			$ch = curl_init();
			curl_setopt($ch, CURLOPT_URL, $url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
			curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
			curl_setopt($ch, CURLOPT_POST, 1);
			curl_setopt($ch, CURLOPT_POSTFIELDS, $file_data);
			$output = curl_exec($ch); //发送请求获取结果
			curl_close($ch); //关闭会话
			$output = json_decode($output, true);
			if ($output['errcode'] == 87014) {
				return json(array('code' = >'', 'msg' = >'效验失败,内容含有违法违规内容'));
			}
		}
	}
	$rs = DB: :table('t_learns') - >insert($saveData);
	if ($rs) {
		if ($data['status'] == 1) {
			return json(array('code' = >'200', 'msg' = >'保存成功'));
		} else {
			return json(array('code' = >'200', 'msg' = >'发布成功'));
		}

	} else {
		if ($data['status'] == 1) {
			return json(array('code' = >'', 'msg' = >'保存失败'));
		} else {
			return json(array('code' = >'', 'msg' = >'发布失败'));
		}
	}
}


public function curlRequest($url,$mothed = "GET" , $data = array())
    {
        $ch = curl_init();
        $header = "Accept-Charset: utf-8";
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $mothed);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
        curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
        curl_setopt($ch, CURLOPT_AUTOREFERER, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $temp = curl_exec($ch);
        curl_close($ch);
        return $temp;
    }

效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值