uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。
count Number 否 最多可以选择的图片张数,默认9
sizeType StringArray 否 original 原图,compressed 压缩图,默认二者都有
sourceType StringArray 否 album 从相册选图,camera 使用相机,默认二者都有
success Function 是 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)
注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。
success 返回参数说明
参数 类型 说明
tempFilePaths StringArray 图片的本地文件路径列表
tempFiles ObjectArray 图片的本地文件列表,每一项是一个 File 对象
File 对象结构如下
path String 本地文件路径
size Number 本地文件大小,单位:B
示例
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
uni.previewImage(OBJECT)
预览图片
OBJECT 参数说明
current String 否 当前显示图片的链接,不填则默认为 urls 的第一张
urls StringArray 是 需要预览的图片链接列表
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)
示例
uni.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function (res) {
// 预览图片
uni.previewImage({
urls: res.tempFilePaths
});
}
});
uni.getImageInfo(OBJECT) 获取图片信息
OBJECT 参数说明
参数名 类型 必填 说明
src String 是 图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)
success 返回参数说明
参数名 类型 说明 最低版本
width Number 图片宽度,单位px *
height Number 图片高度,单位px *
path String 返回图片的本地路径 *
orientation String 返回图片的方向,有效值见下表 *
type String 返回图片的格式 *
orientation 参数说明
枚举值 说明
up 默认
down 180度旋转
left 逆时针旋转90度
right 顺时针旋转90度
up-mirrored 同up,但水平翻转
down-mirrored 同down,但水平翻转
left-mirrored 同left,但垂直翻转
right-mirrored 同right,但垂直翻转
示例
uni.chooseImage({
count: 1,
sourceType: ['album'],
success: function (res) {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function (image) {
console.log(image.width);
console.log(image.height);
}
});
}
});
uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册
参数名 类型 必填 说明
filePath String 是 图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)
success 返回参数说明
参数名 类型 说明
errMsg String 调用结果
示例代码:
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: function (res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success: function () {
console.log('save success');
}
});
}
});
- 第1讲 : 创建项目、部署 VUE 、入口页面布局
- 第2讲,快速开始第一个项目
- 第3讲 : uni-app 开发规范及目录结构
- 第4讲 : uni-app 页面样式与布局
- 第5讲 : uni-app 配置文件 - pages.json
- 第6讲 : 配置文件 - manifest.json
- 第7讲 : uni-app 页面生命周期
- 第8讲 : uni-app 模板语法 - 数据绑定
- 第9讲Class 与 Style 绑定 (动态菜单激活示例)
- 第10讲 : uni-app 事件处理、事件绑定、事件传参
- 第11讲 : uni-app 组件 - 基础组件
- 第12讲 : uni-app 组件 - 表单组件
- 第13讲 : uni-app 组件 - navigator(导航)及页
- 第14讲 : uni-app 组件 - 媒体组件
- 第15讲 : uni-app 组件 - 地图组件
- 第16讲 : uni-app 接口 - 网络请求
- 第17讲 : uni-app 接口 - 从本地相册选择图片或使
- 第18讲 : uni-app 上传(图片上传实战)
- 第19讲 : uni-app 接口 - 数据缓存
- 第20讲 : uni-app 设备相关
- 第21讲 : uni-app 交互反馈
- 第22讲 : uni-app 设置导航条
- 第23讲 : uni-app 导航(页面流转)
- 第24讲 : uni-app 下拉刷新
- 第25讲 : uni-app 上拉加载更多
- 第26讲 : uni-app 第三方登录(小程序篇)
- 第27讲 : uni-app 登录(h5+ app 篇)
- 第28讲 : 自定义组件创建及使用