微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2019/6/27 20:58:28
本文主要是介绍微信小程序图片选择、上传到服务器、预览(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" 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{// 上传成功 获取上传文件信息 //插入到数据库中 } } }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
这篇关于微信小程序图片选择、上传到服务器、预览(PHP)实现实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南