微信小程序開發(fā)之從相冊(cè)獲取圖片 使用相機(jī)拍照 本地圖片上傳
更新時(shí)間：2017年04月18日 11:04:16 作者：dzp_coder
本篇文章主要介紹了微信小程序開發(fā)之從相冊(cè)獲取圖片--使用相機(jī)拍照，本地圖片上傳的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
今天遇到微信小程序的用戶頭像設(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'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
_this.setData({
tempFilePaths:res.tempFilePaths
})
}
})
}
})
API 說明:
這里說說sourcetype.默認(rèn)是從相冊(cè)獲取和使用相機(jī)拍照,跟微信現(xiàn)在選擇圖片的界面一樣,第一格是拍照,后面的是相冊(cè)照片.
這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務(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
}
})
}
})
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問題
下面小編就為大家?guī)硪黄獪\談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
深入認(rèn)識(shí)JavaScript中的函數(shù)
深入認(rèn)識(shí)JavaScript中的函數(shù)...2007-01-01
詳解Javascript百度地圖接口開發(fā)文檔中的類和方法
最近在工作中在用laravel框架仿寫?zhàn)I了么外賣商城,于是學(xué)習(xí)了一下有關(guān)地圖接口相關(guān)的知識(shí),以下是百步地圖接口開發(fā)文檔的一些類和方法的使用，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要介紹了r.js來合并壓縮css文件的示例代碼，在r5下新建一個(gè)css文件夾，里面有四個(gè)css文件：main.css、nav.css、form.css、grid.css，具體示例代碼大家參考下本文2018-04-04
JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之字典方法，字典即Dictionary，是一種以?鍵-值對(duì)?形式存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了移動(dòng)端手指放大縮小插件與js源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要教大家如何簡單實(shí)現(xiàn)js拖拽效果，很詳細(xì)的js拖拽效果實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
自己封裝的javascript事件隊(duì)列函數(shù)版
這篇文章主要介紹了自己封裝的javascript事件隊(duì)列函數(shù)版,兼容了大部份瀏覽器,需要的朋友可以參考下2014-06-06
FF IE兼容性的修改小結(jié)，大家以后在javascript的編寫過程中需要注意下。2009-09-09
js獲取對(duì)象,數(shù)組所有屬性鍵值(key)和對(duì)應(yīng)值(value)的方法示例
這篇文章主要介紹了js獲取對(duì)象,數(shù)組所有屬性鍵值(key)和對(duì)應(yīng)值(value)的方法,涉及javascript對(duì)于對(duì)象、數(shù)組鍵名與鍵值遍歷相關(guān)操作技巧,需要的朋友可以參考下2019-06-06