• uni.chooseImage(OBJECT)
  • uni.previewImage(OBJECT)
  • uni.getImageInfo(OBJECT)
  • uni.saveImageToPhotosAlbum(OBJECT)
  • uni.compressImage(OBJECT)
  • wx.chooseMessageFile(OBJECT)

    uni.chooseImage(OBJECT)

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

    另外选择和上传非图像、视频文件参考:https://ask.dcloud.net.cn/article/35547。

    App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera

    OBJECT 参数说明

    参数名类型必填说明平台差异说明
    countNumber最多可以选择的图片张数,默认9见下方说明
    sizeTypeArray<String>original 原图,compressed 压缩图,默认二者都有5+App、微信小程序、支付宝小程序、百度小程序
    sourceTypeArray<String>album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
    successFunction成功则返回图片的本地文件路径列表 tempFilePaths
    failFunction接口调用失败的回调函数小程序、5+App
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    Tips

    • count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。

    success 返回参数说明

    参数类型说明
    tempFilePathsArray<String>图片的本地文件路径列表
    tempFilesArray<Object>图片的本地文件列表,每一项是一个 File 对象

    File 对象结构如下

    参数类型说明
    pathString本地文件路径
    sizeNumber本地文件大小,单位:B

    示例

    1. uni.chooseImage({
    2. count: 6, //默认9
    3. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
    4. sourceType: ['album'], //从相册选择
    5. success: function (res) {
    6. console.log(JSON.stringify(res.tempFilePaths));
    7. }
    8. });

    uni.previewImage(OBJECT)

    预览图片。

    OBJECT 参数说明

    参数名类型必填说明平台差异说明
    currentString/Number详见下方说明详见下方说明
    urlsArray<String>需要预览的图片链接列表
    indicatorString图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。5+App
    loopBoolean是否可循环预览,默认值为 false5+App
    longPressActionsObject长按图片显示操作菜单,如不填默认为保存相册,1.9.5 起支持。5+App
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    current 参数说明

    1.9.5+ 支持传图片在 urls 中的索引值

    current 为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间,current为必填。不填会报错

    注意,当 urls 中有重复的图片链接时:

    • 传链接,预览结果始终显示该链接在 urls 中第一次出现的位置。
    • 传索引值,在微信/百度/头条小程序平台,会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。举例说明:

    一组图片 [A, B1, C, B2, D],其中 B1 与 B2 的图片链接是一样的。

    • 传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。
    • 传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/头条小程序平台,最终传入的 urls 是 [A, C, B2, D],过滤掉了与 B2 重复的 B1。longPressActions 参数说明
    参数类型必填说明
    itemListArray<String>按钮的文字数组
    itemColorString按钮的文字颜色,字符串格式,默认为"#000000"
    successFunction接口调用成功的回调函数,详见返回参数说明
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    success 返回参数说明

    参数类型说明
    indexNumber用户长按图片的索引值
    tapIndexNumber用户点击按钮列表的索引值

    示例

    1. // 从相册选择6张图
    2. uni.chooseImage({
    3. count: 6,
    4. sizeType: ['original', 'compressed'],
    5. sourceType: ['album'],
    6. success: function(res) {
    7. // 预览图片
    8. uni.previewImage({
    9. urls: res.tempFilePaths,
    10. longPressActions: {
    11. itemList: ['发送给朋友', '保存图片', '收藏'],
    12. success: function(data) {
    13. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
    14. },
    15. fail: function(err) {
    16. console.log(err.errMsg);
    17. }
    18. }
    19. });
    20. }
    21. });

    uni.getImageInfo(OBJECT)

    获取图片信息。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序

    OBJECT 参数说明

    参数名类型必填说明
    srcString图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    success 返回参数说明

    参数名类型说明平台差异说明
    widthNumber图片宽度,单位px
    heightNumber图片高度,单位px
    pathString返回图片的本地路径
    orientationString返回图片的方向,有效值见下表小程序
    typeString返回图片的格式小程序

    orientation 参数说明

    枚举值说明
    up默认
    down180度旋转
    left逆时针旋转90度
    right顺时针旋转90度
    up-mirrored同up,但水平翻转
    down-mirrored同down,但水平翻转
    left-mirrored同left,但垂直翻转
    right-mirrored同right,但垂直翻转

    示例

    1. uni.chooseImage({
    2. count: 1,
    3. sourceType: ['album'],
    4. success: function (res) {
    5. uni.getImageInfo({
    6. src: res.tempFilePaths[0],
    7. success: function (image) {
    8. console.log(image.width);
    9. console.log(image.height);
    10. }
    11. });
    12. }
    13. });

    uni.saveImageToPhotosAlbum(OBJECT)

    保存图片到系统相册。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xx

    OBJECT 参数说明

    参数名类型必填说明
    filePathString图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    success 返回参数说明

    参数名类型说明
    errMsgString调用结果

    示例代码:

    1. uni.chooseImage({
    2. count: 1,
    3. sourceType: ['camera'],
    4. success: function (res) {
    5. uni.saveImageToPhotosAlbum({
    6. filePath: res.tempFilePaths[0],
    7. success: function () {
    8. console.log('save success');
    9. }
    10. });
    11. }
    12. });

    uni.compressImage(OBJECT)

    压缩图片接口,可选压缩质量

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    1.9.7+ 自定义组件编译模式xxx

    OBJECT 参数说明

    属性类型默认值必填说明
    srcString图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径
    qualityNumber80压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    success 返回参数说明

    属性类型说明
    tempFilePathString压缩后图片的临时文件路径

    示例代码:

    1. uni.compressImage({
    2. src: '/static/logo.jpg',
    3. quality: 80,
    4. success: res => {
    5. console.log(res.tempFilePath)
    6. }
    7. })

    wx.chooseMessageFile(OBJECT)

    从客户端会话选择文件。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xxxxx

    发现错误?想参与编辑?在 GitHub 上编辑此页面!