微信小程序实现图片上传功能实例前端+PHP后端

前言

几乎每个程序都需要用到图片。下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

方法如下:

一、wxml文件

rush:xhtml;"> 上传图片

二、js文件

rush:js;"> Page({ /** * 页面的初始数据 */ data: {  //初始化为空 source:'' },/** * 上传图片 */ uploadimg:function(){ var that = this; wx.chooseImage({ //从本地相册选择图片或使用相机拍照 count: 1,// 认9 sizeType: ['original','compressed'],// 可以指定是原图还是压缩图,认二者都有 sourceType: ['album','camera'],// 可以指定来源是相册还是相机,认二者都有 success:function(res){ //console.log(res) //前台显示 that.setData({ source: res.tempFilePaths }) // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://www.website.com/home/api/uploadimg',filePath: tempFilePaths[0],name: 'file',success:function(res){ //打印 console.log(res.data) } })

}
})
},)}

三、PHP后端代码

file('file'); if ($file) { $info = $file->move('public/upload/weixin/'); if ($info) { $file = $info->getSaveName(); $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file]; return json($res); } } }

运行结果:

console打印结果:

此时表示上传成功!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

相关文章

开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序