这篇文章主要介绍了微信小程序中如何实现图片选择、上传到服务器、预览功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
小程序实现选择图片、预览图片、上传到开发者服务器上
后台使用的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}}" 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{// 上传成功 获取上传文件信息 //插入到数据库中 } } }
感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序中如何实现图片选择、上传到服务器、预览功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。