微信小程序图片选择、上传到服务器、预览(PHP)实现实例


Posted in Javascript onMay 11, 2017

微信小程序图片选择、上传到服务器、预览(PHP)实现实例

小程序实现选择图片、预览图片、上传到开发者服务器上

后台使用的tp3.2 图片上传

请求时候的header参考时可以去掉(个人后台验证权限使用)

小程序前端代码:

<view class="section">
 <form bindsubmit="bindFormSubmit">
  <textarea placeholder="请输入问题内容" name="content"/>
  <view class="">
   选择提问图片:  <label bindtap="checkimg">点击选择图片</label>
  </view>
  <view class="">
    <image wx:for="{{imglist}}" mode="aspectFit" bindtap="ylimg" data-src="{{item}}" style="width:75px;height:75px;" src="{{item}}"></image>
  </view>
  <button form-type="submit"> 提交 </button>
 </form>
</view>

小程序js代码:

data: {
  imglist:[]
 },
/**
  * form提交事件
  */
 bindFormSubmit:function(e){
   self=this
   //图片
   var imglist = self.data.imglist
   //提问内容
   var content=e.detail.value.content;
   if(content==''){
    wx.showToast({
     title: '内容不能为空',
     icon: 'loading',
     duration: 1000,
     mask:true
    })
   }
   wx.showLoading({
    title: '正在提交...',
    mask:true
   })
   //添加问题
   wx.request({
    url: 'https://xxxxxxxxxx/index.PHP?g=user&m=center&a=createwt',
    data: {
     content:content
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: app.globalData.header, // 设置请求的 header
    success: function (res) {
     // success
     if(typeof(res.data)=='number'){
      if (imglist != '') {
       //开始插入图片
       for(var i=0;i<imglist.length;i++){
        //上传至服务器
        wx.uploadFile({
         url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //仅为示例,非真实的接口地址
         filePath: imglist[0],
         name: 'files',
         formData: {
          'wtid': res.data
         },
         header: app.globalData.header,
         success: function (res) {
          if(i>=imglist.length){
           self.setData({
            imglist:[]
           })
           wx.hideLoading();
           wx.showToast({
            title: '提问成功',
            icon: 'success',
            duration: 2000,
            mask: true
           })
           wx.navigateBack({
            delta: 1
           })
          }
         }
        })
       }
       console.log(imglist);
      }else{
       wx.hideLoading();
       wx.showToast({
        title: '提问成功',
        icon: 'success',
        duration: 2000,
        mask: true
       })
       wx.navigateBack({
        delta: 1
       })
      }
     }else{
      wx.hideLoading();
      wx.showToast({
       title: res.data,
       icon: 'loading',
       duration: 1000,
       mask: true
      })
     }
    },
    fail: function (res) {
     self.onLoad();
    }
   })
 },
 //点击选择图片
 checkimg:function(){
   console.log('点击选择图片');
   self=this
   wx.chooseImage({
    count: 9, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
     // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
     var tempFilePaths = res.tempFilePaths
     self.setData({
      imglist:tempFilePaths
     })
    }
   })
 },
 //点击预览图片
 ylimg:function(e){
  wx.previewImage({
   current: e.target.dataset.src,
   urls: this.data.imglist // 需要预览的图片http链接列表
  })
 }

php后台代码

//图片上传

public function upload(){
if(IS_POST){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize  =   3145728 ;// 设置附件上传大小
$upload->exts   =   array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath =   './Uploads/'; // 设置附件上传根目录
$upload->savePath =   ''; // 设置附件上传(子)目录
// 上传文件 
$info  =  $upload->upload();
if(!$info) {// 上传错误提示错误信息
  $this->error($upload->getError());
}else{// 上传成功 获取上传文件信息
//插入到数据库中
}
}
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
JS实现轮播图效果
Jan 11 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
微信小程序中使用javascript 回调函数
May 11 #Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 #Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 #Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 #Javascript
JS实现的四级密码强度检测功能示例
May 11 #Javascript
You might like
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python元组操作实例解析
2014/09/23 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
学生保证书
2015/01/16 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python