微信小程序開(kāi)發(fā)之從相冊(cè)獲取圖片使用相機(jī)拍照本地圖片上傳

更新時(shí)間：2017年04月18日 11:04:16 作者：dzp_coder

本篇文章主要介紹了微信小程序開(kāi)發(fā)之從相冊(cè)獲取圖片--使用相機(jī)拍照，本地圖片上傳的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

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

先上gif:

再上代碼:

小demo,代碼很簡(jiǎn)單.

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'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有 
   success: function (res) { 
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 
    _this.setData({ 
     tempFilePaths:res.tempFilePaths 
    }) 
   } 
  }) 
 } 
})

API 說(shuō)明:

這里說(shuō)說(shuō)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 
   } 
  }) 
 } 
})

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
深入認(rèn)識(shí)JavaScript中的函數(shù)
深入認(rèn)識(shí)JavaScript中的函數(shù)...
2007-01-01
詳解Javascript百度地圖接口開(kāi)發(fā)文檔中的類和方法
最近在工作中在用laravel框架仿寫?zhàn)I了么外賣商城,于是學(xué)習(xí)了一下有關(guān)地圖接口相關(guān)的知識(shí),以下是百步地圖接口開(kāi)發(fā)文檔的一些類和方法的使用，需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2017-02-02
r.js來(lái)合并壓縮css文件的示例
這篇文章主要介紹了r.js來(lái)合并壓縮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源碼
這篇文章主要介紹了移動(dòng)端手指放大縮小插件與js源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
簡(jiǎn)單實(shí)現(xiàn)js拖拽效果
這篇文章主要教大家如何簡(jiǎn)單實(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é)
FF IE兼容性的修改小結(jié)，大家以后在javascript的編寫過(guò)程中需要注意下。
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