微信小程序上传帖子的实例代码(含有文字图片的微信验证)


Posted in Javascript onJuly 11, 2020

微信小程序上传帖子的实例代码(含有文字图片的微信验证)

public.js

var graceJS = require('../../utils/grace.js');
import { config } from '../../config.js'
Page({

 /**
 * 页面的初始数据
 */
 data: {
 imglist: [],
 title:'',
 content:'',

 },

 delImg(e) {
 let index = e.currentTarget.dataset.index;
 let array = [];
 console.log(index);
 for (var i = 0; i < this.data.imglist.length; i++) {
  if (i !== index) {
  array.push(this.data.imglist[i])
  }
 }
 console.log(array);
 this.setData({
  imglist: array,
 })
 },

 upimg() {
 let that = this
 var url = config.api_base_url + "upload_pic"
 wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
  const tempFilePaths = res.tempFilePaths;
  wx.showLoading({
   title: '上传中',
  })
  wx.uploadFile({
   url,
   filePath: tempFilePaths[0],
   name: 'file',
   success(res) {
   console.log(res.data);
   wx.hideLoading()
   if (res.data == '0') {
    graceJS.msg('上传失败');
   }else{
    console.log(res.data)
    if (res.data.indexOf("非法图片")>=0){
    graceJS.msg(res.data);
    } else {
    graceJS.msg("上传成功");
    var array = that.data.imglist.concat(res.data)
    that.setData({
     imglist: array,
    })
    }
   }
   
   }
  })

  }
 })
 },
 zf_title:function(e){
 this.setData({
  title: e.detail.value
 })
 },
 zf_content: function (e) {
 this.setData({
  content: e.detail.value
 })
 },
 tj_info: function (event){
 var that = this;
 console.log("event", event)
 var title = this.data.title;
 var content = this.data.content;
 console.log(title)
 console.log(content)
 var imglist = that.data.imglist;
 var uid = wx.getStorageSync('user').id
 if (!title && !content) {
  graceJS.msg("请填写完整");
 } else {
  //写入数据库
  if (uid != undefined) {
  graceJS.post(
   config.api_base_url + 'tiezi_add',
   {title:title, content:content,uid:uid,imglist:imglist}, 
   'json',
   {}, // 此处 {} 代表不设置 header 数据
   function(res){
   if (res.result == 1) {
    graceJS.msg(res.msg);
    setTimeout(()=>{
    graceJS.navigate('../discover/discover','switchTab');
    },2000)
   }else{
    graceJS.msg(res.msg);
   }
   }
  );
  }else{
  graceJS.msg("用户ID获取失败");
  }
  
 }
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

publish.wxml

<!--pages/publish/publish.wxml-->
<view>
 <form > 
		<view class="publish_a">
			<view class="publish_a1">
				<view class="publish_a1_a">
					<input type="text" name="title" bindinput="zf_title" placeholder="输入标题" />
				</view>
				<view class="publish_a1_b">
					<textarea name="content" bindinput="zf_content" placeholder="输入内容文字"></textarea>
				</view>
				<view class="publish_a1_c">
					<view class="publish_a1_c1" >
						<image src="../../img/127.png" bindtap="upimg"></image>
					</view>
					<view class="publish_a1_c2">
						<view wx:for="{{imglist}}" bindtap="delImg" data-index="{{index}}">
							<image src="{{item}}" ></image>
							<text>X</text>
						</view>
					</view>
				</view>
			</view>
		</view>
 	<view class="publish_b" bind:tap="tj_info">发布帖子</view>
	</form>
</view>

publish.wxss

/* pages/publish/publish.wxss */
page{
	padding-bottom: 120rpx;
}
.publish_a{
	padding: 20rpx;
}
.publish_a1{
	background-color: #f5f2f4;
	padding: 20rpx;
}
.publish_a1_a input{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: bold;
}
.publish_a1_b textarea{
	width: 100%;
	font-size: 28rpx;
}
.publish_a1_c1{
	margin-bottom: 20rpx;
}
.publish_a1_c1 image{
	display: block;
	width: 200rpx;
	height: 200rpx;
}
.publish_a1_c2{
	display: flex;
	flex-wrap: wrap;
}
.publish_a1_c2 view{
	position: relative;
	width: 200rpx;
	height: 200rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.publish_a1_c2 image{
	display: block;
	width: 100%;
	height: 100%;
}
.publish_a1_c2 text{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 40rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	font-size: 26rpx;
	color: #fff;
	background-color: rgba(0,0,0,0.3);
}

.zf_btn{
 width: 500px;
}
.publish_b{
	position: fixed;
	left: 0;
	bottom: 0;
	/* width: 100%; */
	background-color: #a67f4a;
	line-height: 100rpx;
	text-align: center;
	color: #fff;
	font-size: 30rpx;
	min-width: 380px;
 width: 100%;
 padding: 0;
 margin: 0;
}

tp

引入
use EasyWeChat\Factory;

public function __construct ( Request $request = null )
 {
  $this->config = [
   'app_id' => 'wx4**********fd45a65',
   'secret' => '082dec1****5b93d286c093e01',
   'response_type' => 'array',
   'log' => [
    'level' => 'debug',
    'file' => __DIR__.'/log/wechat.log',
   ],
  ];
  $this->uid = '';
 }

public function tiezi_add(){
  $data = input('post.');
  if($data['imglist']!=[]){
   foreach ($data['imglist'] as $k => $vo) {
    $data['imglist'][$k] = trim($vo);
   }
   $data['album'] = trim(implode(',', $data['imglist']));
  }
  unset($data['imglist']);

  $data['cid'] = 17;
  $data['status'] = 1;
  $data['sort'] = 0;
  $data['ctime'] = time();
  if(!isset($data['album'])){
   return jserror('至少上传一张图片 ');
  } 
  //验证
 		$miniProgram = Factory::miniProgram($this->config);
 		$result = $miniProgram->content_security->checkText($data['content']);
 		$result2 = $miniProgram->content_security->checkText($data['title']);
 		if($result['errcode']!='0'){
 			return jserror('含有非法关键词');
 		}
 		if($result2['errcode']!='0'){
 			return jserror('含有非法关键词');
 		}

  //保存
  $res = Db::name('post')->insert($data);
  if($res){
   return jssuccess('发布成功');
  }else{
   return jserror('发布失败');
  }
 }
 
public function upload_pic(){
  $file = request()->file('file');
  $info = $file->validate(['ext'=>config()['web']['file_ext']])->move('./public/upload/admin/file');
  $getSaveName = str_replace('\\', '/', $info->getSaveName());//win下反斜杠替换成斜杠
  $msg = 'http://'.$_SERVER['SERVER_NAME'].'/public/upload/admin/file/'.$getSaveName;
   if(is_file('./public/upload/admin/file/'.$getSaveName)){
   //验证图片
   $miniProgram = Factory::miniProgram($this->config);
   $result = $miniProgram->content_security->checkImage('./public/upload/admin/file/'.$getSaveName);
   if($result['errcode']!='0'){
    return '非法图片';
   }else{
    return $msg;
   }
   ################
  }else{
   return '0';
  }
  
 }

到此这篇关于小程序上传帖子(含有文字图片的微信验证)的文章就介绍到这了,更多相关小程序上传帖子内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
详解JavaScript匿名函数和闭包
Jul 10 #Javascript
Vue watch响应数据实现方法解析
Jul 10 #Javascript
详解Vue之事件处理
Jul 10 #Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
Element图表初始大小及窗口自适应实现
Jul 10 #Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 #Javascript
简单了解Vue computed属性及watch区别
Jul 10 #Javascript
You might like
聊天室php&amp;mysql(六)
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
MooTools 1.2介绍
2009/09/14 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
酒店副总岗位职责
2013/12/24 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
优秀员工推荐信
2014/05/10 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python