微信小程序實現(xiàn)圖片上傳功能實例(前端+PHP后端)
更新時間:2018年01月10日 10:32:57 作者:下頁、再停留
這篇文章主要給大家介紹了關于微信小程序實現(xiàn)圖片上傳功能的相關內容,文中詳細介紹了前端+PHP后端的示例代碼,對大家的理解和學習具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
前言
幾乎每個程序都需要用到圖片。下面就來給大家介紹前端+PHP后端實現(xiàn)微信小程序實現(xiàn)圖片上傳功能,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。
方法如下:
一、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({ //從本地相冊選擇圖片或使用相機拍照 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后端代碼
// 上傳圖片 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打印結果:
此時表示上傳成功!
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
JavaScript+Html5實現(xiàn)按鈕復制文字到剪切板功能(手機網頁兼容)
在學習javascript的過程中,遇到一個問題就是基于JavaScript+Html5實現(xiàn)按鈕復制文字到剪切板功能,下面小編給大家分享下我的實現(xiàn)思路,感興趣的朋友可以參考下2017-03-03JavaScript設計模式之構造器模式(生成器模式)定義與用法實例分析
這篇文章主要介紹了JavaScript設計模式之構造器模式(生成器模式)定義與用法,結合實例形式分析了javascript構造器模式的概念、原理、與工廠模式的區(qū)別以及相關使用方法,需要的朋友可以參考下2018-07-07JavaScript插入動態(tài)樣式實現(xiàn)代碼
能夠把CSS樣式包含到HTML頁面中的元素有兩個。其中,<link>元素用于包含來自外部的文件,而<style>元素用于指定嵌入的樣式2012-02-02