微信小程序?qū)崿F(xiàn)圖片上傳功能實例(前端+PHP后端)
前言
幾乎每個程序都需要用到圖片。下面就來給大家介紹前端+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í)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
JavaScript+Html5實現(xiàn)按鈕復(fù)制文字到剪切板功能(手機(jī)網(wǎng)頁兼容)
在學(xué)習(xí)javascript的過程中,遇到一個問題就是基于JavaScript+Html5實現(xiàn)按鈕復(fù)制文字到剪切板功能,下面小編給大家分享下我的實現(xiàn)思路,感興趣的朋友可以參考下2017-03-03JavaScript設(shè)計模式之構(gòu)造器模式(生成器模式)定義與用法實例分析
這篇文章主要介紹了JavaScript設(shè)計模式之構(gòu)造器模式(生成器模式)定義與用法,結(jié)合實例形式分析了javascript構(gòu)造器模式的概念、原理、與工廠模式的區(qū)別以及相關(guān)使用方法,需要的朋友可以參考下2018-07-07JavaScript插入動態(tài)樣式實現(xiàn)代碼
能夠把CSS樣式包含到HTML頁面中的元素有兩個。其中,<link>元素用于包含來自外部的文件,而<style>元素用于指定嵌入的樣式2012-02-02