PHP实现微信小程序上图片选择及上传到服务器和预览

内容导读

收集整理的这篇技术教程文章主要介绍了PHP实现微信小程序上图片选择及上传到服务器和预览，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3360字，纯文字阅读大概需要5分钟。

内容图文

这篇文章主要介绍了微信小程序图片选择、上传到服务器、预览（PHP）实现实例的相关资料,需要的朋友可以参考下

微信小程序图片选择、上传到服务器、预览（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" 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 ThinkUpload();// 实例化上传类$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{// 上传成功 获取上传文件信息//插入到数据库中}}}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用PHP导出数据到淘宝助手CSV

PHP实现微信公众平台企业号验证接口

以上就是PHP实现微信小程序上图片选择及上传到服务器和预览的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是为您收集整理的PHP实现微信小程序上图片选择及上传到服务器和预览全部内容，希望文章能够帮你解决PHP实现微信小程序上图片选择及上传到服务器和预览所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。