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

前端之家收集整理的这篇文章主要介绍了微信小程序实现图片上传功能实例(前端+PHP后端)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

方法如下:

一、wxml文件

上传图片

二、js文件

页面的初始数据 */ 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打印结果:

此时表示上传成功!

总结

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

原文链接:https://www.f2er.com/weapp/34236.html

猜你在找的微信小程序相关文章