您好,登錄后才能下訂單哦!
前言
幾乎每個程序都需要用到圖片。下面就來給大家介紹前端+PHP后端實現(xiàn)微信小程序?qū)崿F(xiàn)圖片上傳功能,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧。
方法如下:
一、wxml文件
<text>上傳圖片</text> <view> <button bindtap="uploadimg">點擊選擇上傳圖</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' />
二、js文件
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { //初始化為空 source:'' }, /** * 上傳圖片 */ uploadimg:function(){ var that = this; wx.chooseImage({ //從本地相冊選擇圖片或使用相機(jī)拍照 count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有 success:function(res){ //console.log(res) //前臺顯示 that.setData({ source: res.tempFilePaths }) // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的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后端代碼
// 上傳圖片 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); } } }
運行結(jié)果:
console打印結(jié)果:
此時表示上傳成功!
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。