微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)

一、使用APIwx.chooseImage(OBJECT)

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明：

参数 类型 必填 说明
count Number 否 最多可以选择的图片张数，默认9
sizeType StringArray 否 original 原图，compressed 压缩图，默认二者都有
sourceType StringArray 否 album 从相册选图，camera 使用相机，默认二者都有
success Function 是 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。

success返回参数说明：

参数 类型 说明 最低版本
tempFilePaths StringArray 图片的本地文件路径列表  
tempFiles ObjectArray 图片的本地文件列表，每一项是一个 File 对象 1.2.0

File 对象结构如下:

字段 类型 说明
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, // 最多可以选择的图片张数，默认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
   }
  })
 }

二、图片路径进行数据绑定

<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 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

3、js中动态修改文件路径

  var _this = this
  wx.chooseImage({
   count: 9, // 最多可以选择的图片张数，默认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
   }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

  • 微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill"

  • 微信小程序实现倒计时调用相机自动拍照功能

    本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下 在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照. 一.首先是视图层index.wxml,视图层主要负责显示组件和图片. <!--index.wxml--> <view class="userinfo-login"> <view class="page-body"> <view class="page-

  • 微信小程序调用摄像头隐藏式拍照功能

    微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下: 问题 今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看.这系统相当于考驾照时的上机答题部分.开始经理的要求是调用小程序外部的手机拍摄功能,这

  • 微信小程序开发之相册选择和拍照详解及实例代码

    微信小程序开发之相册选择和拍照详解及实例代码

    微信小程序 拍照和相机选择详解 前言: 小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看. 选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下: 直接来看打开相机相册的代码: Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var t

  • 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)

    一.使用APIwx.chooseImage(OBJECT) wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 参数 类型 必填 说明 count Number 否 最多可以选择的图片张数,默认9 sizeType StringArray 否 original 原图,compressed 压缩图,默认二者都有 sourceType StringArray 否 album 从相册选图,camera 使用相机,默认二者都有 success Fun

  • 微信小程序tabBar模板用法实例分析【附demo源码下载】

    微信小程序tabBar模板用法实例分析【附demo源码下载】

    本文实例讲述了微信小程序tabBar模板用法.分享给大家供大家参考,具体如下: 众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能打开5层页面.这样就很容易导致出问题啦,假如我的tabBar有5个呢?下面是微信原话: 一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面.请避免多层级的交互方式,或者使用wx.redirectTo 因此这几天想着根据微信tabBar数组来自定义模板供页面调用.不过我在list里面每个对象都

  • 微信小程序用户自定义模版用法实例分析

    微信小程序用户自定义模版用法实例分析

    本文实例讲述了微信小程序用户自定义模版用法.分享给大家供大家参考,具体如下: 1.新建一个wxml(为测试方便,这里将wxml文件建立在home目录下) /home/home/botmenu.wxml: <template name="bottommenu"> <view class="bottomposition"> <navigator class="item_info" url="../home/ho

  • 微信小程序swiper组件用法实例分析【附源码下载】

    微信小程序swiper组件用法实例分析【附源码下载】

    本文实例讲述了微信小程序swiper组件用法.分享给大家供大家参考,具体如下: 关于视图容器swiper的详细内容可参考官方文档 先来看看运行效果: index.js: Page({ data: { imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jp

  • 微信小程序实现form表单本地储存数据

    本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为了简化操作可直接右键新建目录,这样建出来的文件会直接写在app.json中,无需手动添加. login.wxml代码: <!--pages/login/login.wxml--> <view class='container'> <form bindsubmit='submit'

  • 微信小程序Flex布局用法深入浅出分析

    本文实例讲述了微信小程序Flex布局用法.分享给大家供大家参考,具体如下: Flex布局: Flexible Box的缩写,意为"弹性布局",为盒模型提供巨大的灵活性 使用说明: 1. 任何容器都可以使用flex布局 .box { display: flex; } 2.行内元素可以使用flex布局 .box{ display: inline-flex; } 3.webkit内核的浏览器,要加上-webkit前缀 .box { display: -webkit-flex; /* Safa

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • 微信小程序基于腾讯云对象存储的图片上传功能

    在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}

随机推荐