微信小程序chooseImage的用法(從本地相冊選擇圖片或使用相機(jī)拍照)
一、使用APIwx.chooseImage(OBJECT)
wx.chooseImage(OBJECT)
從本地相冊選擇圖片或使用相機(jī)拍照。
OBJECT參數(shù)說明:
| 參數(shù) | 類型 | 必填 | 說明 |
|---|---|---|---|
| count | Number | 否 | 最多可以選擇的圖片張數(shù),默認(rèn)9 |
| sizeType | StringArray | 否 | original 原圖,compressed 壓縮圖,默認(rèn)二者都有 |
| sourceType | StringArray | 否 | album 從相冊選圖,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 對象 | 1.2.0 |
File 對象結(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 從相冊選圖,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>
號外:
1、wx.chooseImage 調(diào)用相機(jī)或相冊
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 從相冊選圖,camera 使用相機(jī),默認(rèn)二者都有
success: function(res){
// success
console.log(res)
_this.setData({
src:res.tempFilePaths
})
},
fail: function() {
// fail
},
complete: function() {
// complete
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
學(xué)習(xí)JavaScript設(shè)計(jì)模式之責(zé)任鏈模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的責(zé)任鏈模式,對JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
IE6-IE9中tbody的innerHTML不能賦值的解決方法
這篇文章主要介紹了IE6-IE9中tbody的innerHTML不能賦值的解決方法,需要的朋友可以參考下2014-06-06
JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置
這篇文章主要介紹了JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02
Document:getElementsByName()使用方法及示例
Document:getElementsByName()想必大家對它并不陌生吧,主要是根據(jù)名稱獲取元素,下面是其具體的使用方法及范例,感興趣的朋友不要錯(cuò)過2013-10-10
微信小程序在text文本實(shí)現(xiàn)多種字體樣式
這篇文章主要介紹了微信小程序在text文本實(shí)現(xiàn)多種字體樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Three.js 再探 - 寫一個(gè)微信跳一跳極簡版游戲
最近項(xiàng)目結(jié)束,很空閑,于是就試著仿照微信跳一跳寫了一個(gè)極簡版的游戲,到底簡單到什么程度呢?大家可以參考下本文2018-01-01

