微信小程序图片选择、上传到服务器、预览(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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python分支结构(switch)操作简介
2018/01/17 Python
Python中pillow知识点学习
2018/04/30 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
django框架forms组件用法实例详解
2019/12/10 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
工程现场管理求职自荐信
2013/10/02 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
励志演讲稿300字
2014/08/21 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
开幕式邀请函
2015/01/31 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python