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


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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
深入理解js数组的sort排序
May 28 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
原生js生成图片验证码
Oct 11 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;&amp;mysql)三
2006/10/09 PHP
解析php中的escape函数
2013/06/29 PHP
PHP无限分类(树形类)
2013/09/28 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php图片上传类 附调用方法
2016/05/15 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
angular分页指令操作
2017/01/09 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Python FTP操作类代码分享
2014/05/13 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python实现输入数字的连续加减方法
2018/06/22 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python tornado微信开发入门代码
2018/08/24 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python如何将两个txt文件内容合并
2019/10/18 Python
python实现五子棋程序
2020/04/24 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
会计系中文个人求职信
2013/12/24 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记