微信小程序 獲取相冊照片實例詳解
微信小程序 獲取相冊照片
今天遇到微信小程序的用戶頭像設置功能,做筆記.
先上gif:
再上代碼:
小demo,代碼很簡單.
1.index.wxml
<!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button> <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>
2.index.js
//index.js //獲取應用實例 var app = getApp() Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var _this = this; wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片 _this.setData({ tempFilePaths:res.tempFilePaths }) } }) } })
API 說明:
這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務器,需要用到另一個API.
示例代碼:
wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload', //僅為示例,非真實的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, success: function(res){ var data = res.data //do something } }) } })
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實例代碼
這篇文章主要介紹了微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實例代碼的相關資料,需要的朋友可以參考下2017-02-02微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10徒手實現(xiàn)關于JavaScript的24+數(shù)組方法
數(shù)組是我們日常工作中用的最頻繁的一類數(shù)據(jù)結構,能幫助我們解決許多問題,而其本身也包含接近33個之多的方法,做了一個腦圖分類如下,熟練使用數(shù)組的你,是否想知道他們內部的實現(xiàn)原理呢?接下來小編就帶大家進入主題,希望能幫助到你2021-09-09codemirror6實現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實現(xiàn)在線代碼編輯器使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01websocket心跳重連實現(xiàn)探索(npm:websocket-heartbeat-js)
這篇文章主要為大家介紹了websocket心跳重連實現(xiàn)探索(npm:websocket-heartbeat-js),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07