微信小程序图片选择、上传到服务器、预览(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 表格隔行颜色
Dec 02 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
详解angular中的作用域及继承
May 31 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
vue-router的两种模式的区别
May 30 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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无限分类的深入理解
2013/06/02 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
vue实现分页加载效果
2019/12/24 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
小学英语教师先进事迹
2014/05/28 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
投诉书格式范本
2015/07/02 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
深入理解python多线程编程
2021/04/18 Python
Java常用函数式接口总结
2021/06/29 Java/Android
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server