微信小程序 獲取相冊照片實(shí)例詳解
微信小程序 獲取相冊照片
今天遇到微信小程序的用戶頭像設(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
}
})
}
})
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 微信小程序開發(fā)之從相冊獲取圖片 使用相機(jī)拍照 本地圖片上傳
- 微信小程序開發(fā)之相冊選擇和拍照詳解及實(shí)例代碼
- PHP實(shí)現(xiàn)微信JS-SDK接口選擇相冊及拍照并上傳的方法
- 微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊中選圖接口用法示例
- 微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法
- 微信小程序多張圖片上傳功能
- 微信小程序開發(fā)(二)圖片上傳+服務(wù)端接收詳解
- 微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
- 移動端html5圖片上傳方法【更好的兼容安卓IOS和微信】
- 微信端調(diào)取相冊和攝像頭功能,實(shí)現(xiàn)圖片上傳,并上傳到服務(wù)器
相關(guān)文章
微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10
徒手實(shí)現(xiàn)關(guān)于JavaScript的24+數(shù)組方法
數(shù)組是我們?nèi)粘9ぷ髦杏玫淖铑l繁的一類數(shù)據(jù)結(jié)構(gòu),能幫助我們解決許多問題,而其本身也包含接近33個(gè)之多的方法,做了一個(gè)腦圖分類如下,熟練使用數(shù)組的你,是否想知道他們內(nèi)部的實(shí)現(xiàn)原理呢?接下來小編就帶大家進(jìn)入主題,希望能幫助到你2021-09-09
codemirror6實(shí)現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實(shí)現(xiàn)在線代碼編輯器使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
websocket心跳重連實(shí)現(xiàn)探索(npm:websocket-heartbeat-js)
這篇文章主要為大家介紹了websocket心跳重連實(shí)現(xiàn)探索(npm:websocket-heartbeat-js),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07

