⼩程序实现图⽚上传功能实例（前端+PHP后端）前⾔
⼏乎每个程序都需要⽤到图⽚。下⾯就来给⼤家介绍前端+PHP后端实现⼩程序实现图⽚上传功能，分享出来供⼤家参考学习，下⾯话不多说了，来⼀起看看详细的介绍吧。
⽅法如下：
⼀、wxml⽂件
<text>上传图⽚</text>
<view>
<button bindtap="uploadimg">点击选择上传图</button>
jquery框架定义
</view>
<image src='{{source}}' style='width:600rpx; height:600rpx' />
⼆、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: pFilePaths
})
// 返回选定照⽚的本地⽂件路径列表，tempFilePath可以作为img标签的src属性显⽰图⽚
var tempFilePaths = pFilePaths
wx.uploadFile({
url: 'www.website/home/api/uploadimg',
filePath: tempFilePaths[0],
name: 'file',
success:function(res){
//打印
console.log(res.data)
}
})
}
})
},)}
三、PHP后端代码
// 上传图⽚
public function uploadimg()
{
$file = request()->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打印结果：
此时表⽰上传成功！
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。