微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
程序员文章站
2022-06-20 13:27:30
一、使用apiwx.chooseimage(object)
wx.chooseimage(object)
从本地相册选择图片或使用相机拍照。
object参数说...
一、使用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 对象 |
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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序调用摄像头隐藏式拍照功能