欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序chooseImage的用法(從本地相冊選擇圖片或使用相機拍照)

 更新時間:2018年08月22日 11:34:00   作者:ForeverGuard  
這篇文章主要介紹了微信小程序chooseImage的用法(從本地相冊選擇圖片或使用相機拍照),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、使用APIwx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

從本地相冊選擇圖片或使用相機拍照。

OBJECT參數(shù)說明:

參數(shù) 類型 必填 說明
count Number 最多可以選擇的圖片張數(shù),默認9
sizeType StringArray original 原圖,compressed 壓縮圖,默認二者都有
sourceType StringArray album 從相冊選圖,camera 使用相機,默認二者都有
success Function 成功則返回圖片的本地文件路徑列表 tempFilePaths
fail Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行)

注:文件的臨時路徑,在小程序本次啟動期間可以正常使用,如需持久保存,需在主動調(diào)用 wx.saveFile,在小程序下次啟動時才能訪問得到。

success返回參數(shù)說明:

參數(shù) 類型 說明 最低版本
tempFilePaths StringArray 圖片的本地文件路徑列表  
tempFiles ObjectArray 圖片的本地文件列表,每一項是一個 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ù),默認9
   sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認二者都有
   sourceType: ['album', 'camera'], // album 從相冊選圖,camera 使用相機,默認二者都有
   success: function(res){
   // success
   console.log(res)
   _this.setData({
    src:res.tempFilePaths
   })
   },
   fail: function() {
   // fail
   },
   complete: function() {
   // complete
   }
  })
 }

二、圖片路徑進行數(shù)據(jù)綁定

<view class="container">
 <view>
 <button type="default" bindtap="gotoShow" >點擊上傳照片</button> 
 </view>
 <view>
 <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
 </view>
</view>

號外:

1、wx.chooseImage 調(diào)用相機或相冊

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 數(shù)據(jù)綁定

3、js中動態(tài)修改文件路徑

  var _this = this
  wx.chooseImage({
   count: 9, // 最多可以選擇的圖片張數(shù),默認9
   sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認二者都有
   sourceType: ['album', 'camera'], // album 從相冊選圖,camera 使用相機,默認二者都有
   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è)計模式之責(zé)任鏈模式

    學(xué)習(xí)JavaScript設(shè)計模式之責(zé)任鏈模式

    這篇文章主要為大家介紹了JavaScript設(shè)計模式中的責(zé)任鏈模式,對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下
    2016-01-01
  • JS中對象與字符串的互相轉(zhuǎn)換詳解

    JS中對象與字符串的互相轉(zhuǎn)換詳解

    下面小編就為大家?guī)硪黄狫S中對象與字符串的互相轉(zhuǎn)換詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • IE6-IE9中tbody的innerHTML不能賦值的解決方法

    IE6-IE9中tbody的innerHTML不能賦值的解決方法

    這篇文章主要介紹了IE6-IE9中tbody的innerHTML不能賦值的解決方法,需要的朋友可以參考下
    2014-06-06
  • JS中錨點鏈接點擊平滑滾動并自由調(diào)整到頂部位置

    JS中錨點鏈接點擊平滑滾動并自由調(diào)整到頂部位置

    這篇文章主要介紹了JS中錨點鏈接點擊平滑滾動并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-02-02
  • javascript中的糖衣語法Promise對象詳解

    javascript中的糖衣語法Promise對象詳解

    這篇文章主要介紹了javascript中的糖衣語法Promise對象詳解,Promise 對象代表了未來將要發(fā)生的事件,用來傳遞異步操作的消息,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-07-07
  • Document:getElementsByName()使用方法及示例

    Document:getElementsByName()使用方法及示例

    Document:getElementsByName()想必大家對它并不陌生吧,主要是根據(jù)名稱獲取元素,下面是其具體的使用方法及范例,感興趣的朋友不要錯過
    2013-10-10
  • webpack多入口文件頁面打包配置詳解

    webpack多入口文件頁面打包配置詳解

    本篇文章主要介紹了webpack多入口文件頁面打包配置詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 函數(shù)式 JavaScript(一)簡介

    函數(shù)式 JavaScript(一)簡介

    JavaScript 是一種強大但被誤解的語言。關(guān)于它到底是一種面向?qū)ο蟮恼Z言還是函數(shù)式語言,人們眾說紛紜——但是現(xiàn)在讓我們把這些爭辯都拋到腦后。
    2014-07-07
  • 微信小程序在text文本實現(xiàn)多種字體樣式

    微信小程序在text文本實現(xiàn)多種字體樣式

    這篇文章主要介紹了微信小程序在text文本實現(xiàn)多種字體樣式,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • Three.js 再探 - 寫一個微信跳一跳極簡版游戲

    Three.js 再探 - 寫一個微信跳一跳極簡版游戲

    最近項目結(jié)束,很空閑,于是就試著仿照微信跳一跳寫了一個極簡版的游戲,到底簡單到什么程度呢?大家可以參考下本文
    2018-01-01

最新評論