微信小程序獲取相冊照片實(shí)例詳解

更新時(shí)間：2016年11月16日 10:36:21 作者：dzp_coder

這篇文章主要介紹了微信小程序獲取相冊照片實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下

微信小程序獲取相冊照片

今天遇到微信小程序的用戶頭像設(shè)置功能,做筆記.

先上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 
//獲取應(yīng)用實(shí)例 
var app = getApp() 
Page({ 
 data: { 
  tempFilePaths: '' 
 }, 
 onLoad: function () { 
 }, 
 chooseimage: function () { 
  var _this = this; 
  wx.chooseImage({ 
   count: 1, // 默認(rèn)9 
   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有 
   sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有 
   success: function (res) { 
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 
    _this.setData({ 
     tempFilePaths:res.tempFilePaths 
    }) 
   } 
  }) 
 } 
})

API 說明:

這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務(wù)器,需要用到另一個(gè)API.

示例代碼:

wx.chooseImage({ 
 success: function(res) { 
  var tempFilePaths = res.tempFilePaths 
  wx.uploadFile({ 
   url: 'http://example.weixin.qq.com/upload', //僅為示例，非真實(shí)的接口地址 
   filePath: tempFilePaths[0], 
   name: 'file', 
   formData:{ 
    'user': 'test' 
   }, 
   success: function(res){ 
    var data = res.data 
    //do something 
   } 
  }) 
 } 
})

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序中實(shí)現(xiàn)一對多發(fā)消息詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序中實(shí)現(xiàn)一對多發(fā)消息詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-02-02
微信小程序 loading（加載中提示框）實(shí)例
這篇文章主要介紹了微信小程序 loading（加載中提示框）實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-10-10
超級強(qiáng)大的表單驗(yàn)證
超級強(qiáng)大的表單驗(yàn)證...
2006-06-06
用JS創(chuàng)建一個(gè)錄屏功能
這篇文章主要介紹了利用JS創(chuàng)建一個(gè)錄屏功能，創(chuàng)建這個(gè)功能錢我們首先創(chuàng)建一個(gè)HTML文件，包含記錄按鈕和一個(gè)播放標(biāo)簽，下面來看看創(chuàng)建的詳細(xì)過程
2021-11-11
open 打開瀏覽器的過程原理示例解析
這篇文章主要為大家介紹了open 打開瀏覽器的過程原理示例解析，
有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
微信小程序 Mustache語法詳細(xì)介紹
這篇文章主要介紹了微信小程序 Mustache語法詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JS前端實(shí)現(xiàn)fsm有限狀態(tài)機(jī)實(shí)例詳解
這篇文章主要為大家介紹了JS前端實(shí)現(xiàn)fsm有限狀態(tài)機(jī)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
微信小程序 toast組件詳細(xì)介紹
這篇文章主要介紹了微信小程序 toast組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2016-09-09
如何利用javascript做簡單的算法
這篇文章主要介紹了如何利用javascript做簡單的算法，主要是以提問的形式猶如練習(xí)小例子然后解決問題并附代碼說明,需要的朋友可以參考一下
2021-11-11