微信小程序chooseImage的用法(从本地相册选择图片
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照),长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
一、使用API
wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
OBJECT参数说明
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
count | Number | 否 | 最多可以选择的图片张数,默认9 |
sizeType | StringArray | 否 | original 原图,pressed 压缩图,默认二者都有 |
sourceType | StringArray | 否 | album 从相册选图,camera 使用相机,默认二者都有 |
suess | Function | 是 | 成功则返回图片的本地文件路径列表 tempFilePaths |
fail | Function | 否 | 接口调用失败的回调函数 |
plete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
注文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。
suess返回参数说明
参数 | 类型 | 说明 | 最低版本 |
---|---|---|---|
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', 'pressed'], // original 原图,pressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 suess: function(res){ // suess console.log(res) _this.setData({ src:res.tempFilePaths }) }, fail: function() { // fail }, plete: function() { // plete } }) }
二、图片路径进行数据绑定
<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', 'pressed'], // original 原图,pressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 suess: function(res){ // suess console.log(res) _this.setData({ src:res.tempFilePaths }) }, fail: function() { // fail }, plete: function() { // plete }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程