微信小程序chooseImage的用法(從本地相冊(cè)選擇圖片或使用相機(jī)拍照)
一、使用APIwx.chooseImage(OBJECT)
wx.chooseImage(OBJECT)
從本地相冊(cè)選擇圖片或使用相機(jī)拍照。
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
count | Number | 否 | 最多可以選擇的圖片張數(shù),默認(rèn)9 |
sizeType | StringArray | 否 | original 原圖,compressed 壓縮圖,默認(rèn)二者都有 |
sourceType | StringArray | 否 | album 從相冊(cè)選圖,camera 使用相機(jī),默認(rèn)二者都有 |
success | Function | 是 | 成功則返回圖片的本地文件路徑列表 tempFilePaths |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會(huì)執(zhí)行) |
注:文件的臨時(shí)路徑,在小程序本次啟動(dòng)期間可以正常使用,如需持久保存,需在主動(dòng)調(diào)用 wx.saveFile,在小程序下次啟動(dòng)時(shí)才能訪問得到。
success返回參數(shù)說明:
參數(shù) | 類型 | 說明 | 最低版本 |
---|---|---|---|
tempFilePaths | StringArray | 圖片的本地文件路徑列表 | |
tempFiles | ObjectArray | 圖片的本地文件列表,每一項(xiàng)是一個(gè) File 對(duì)象 | 1.2.0 |
File 對(duì)象結(jié)構(gòu)如下:
字段 | 類型 | 說明 |
---|---|---|
path | String | 本地文件路徑 |
size | Number | 本地文件大小,單位:B |
var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以選擇的圖片張數(shù),默認(rèn)9 sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // album 從相冊(cè)選圖,camera 使用相機(jī),默認(rèn)二者都有 success: function(res){ // success console.log(res) _this.setData({ src:res.tempFilePaths }) }, fail: function() { // fail }, complete: function() { // complete } }) }
二、圖片路徑進(jìn)行數(shù)據(jù)綁定
<view class="container"> <view> <button type="default" bindtap="gotoShow" >點(diǎn)擊上傳照片</button> </view> <view> <image class= "show-image" mode="aspectFitf" src="{{src}}"></image> </view> </view>
號(hào)外:
1、wx.chooseImage 調(diào)用相機(jī)或相冊(cè)
2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 數(shù)據(jù)綁定
3、js中動(dòng)態(tài)修改文件路徑
var _this = this wx.chooseImage({ count: 9, // 最多可以選擇的圖片張數(shù),默認(rèn)9 sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // album 從相冊(cè)選圖,camera 使用相機(jī),默認(rèn)二者都有 success: function(res){ // success console.log(res) _this.setData({ src:res.tempFilePaths }) }, fail: function() { // fail }, complete: function() { // complete }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
學(xué)習(xí)JavaScript設(shè)計(jì)模式之責(zé)任鏈模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的責(zé)任鏈模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01IE6-IE9中tbody的innerHTML不能賦值的解決方法
這篇文章主要介紹了IE6-IE9中tbody的innerHTML不能賦值的解決方法,需要的朋友可以參考下2014-06-06JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置
這篇文章主要介紹了JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02javascript中的糖衣語法Promise對(duì)象詳解
這篇文章主要介紹了javascript中的糖衣語法Promise對(duì)象詳解,Promise 對(duì)象代表了未來將要發(fā)生的事件,用來傳遞異步操作的消息,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07Document:getElementsByName()使用方法及示例
Document:getElementsByName()想必大家對(duì)它并不陌生吧,主要是根據(jù)名稱獲取元素,下面是其具體的使用方法及范例,感興趣的朋友不要錯(cuò)過2013-10-10函數(shù)式 JavaScript(一)簡(jiǎn)介
JavaScript 是一種強(qiáng)大但被誤解的語言。關(guān)于它到底是一種面向?qū)ο蟮恼Z言還是函數(shù)式語言,人們眾說紛紜——但是現(xiàn)在讓我們把這些爭(zhēng)辯都拋到腦后。2014-07-07微信小程序在text文本實(shí)現(xiàn)多種字體樣式
這篇文章主要介紹了微信小程序在text文本實(shí)現(xiàn)多種字體樣式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11Three.js 再探 - 寫一個(gè)微信跳一跳極簡(jiǎn)版游戲
最近項(xiàng)目結(jié)束,很空閑,于是就試著仿照微信跳一跳寫了一個(gè)極簡(jiǎn)版的游戲,到底簡(jiǎn)單到什么程度呢?大家可以參考下本文2018-01-01