ImageReader 图片选择器

用于相册照片读取或拉起拍照

引入

import { ImageReader } from 'mand-mobile-next'

Vue.createApp().component(ImageReader.name, ImageReader)

代码演示

API

ImageReader Props

属性说明类型默认值备注
name标识String可用于区分多个选择器
maxSize图片尺寸限制String/Number单位kb
is-camera-only是否只支持拍照Booleanfalse
max-amount选择多张Number只在is-multipletrue时有效
is-multiple是否支持选择多张Booleanfalse存在兼容问题
accept支持图片类型Array*['jpeg','png']
disabled是否禁用Booleanfalse
is-processor是否开启图片质量压缩Booleanfalse

ImageReader Events

@select(name, { files })

图片选择完成事件,还未开始读取

属性说明类型备注
name选择器标识String-
files图片对象集合Array<File>-

@complete(name, { dataUrl, blob, file })

图片选择读取完成事件

属性说明类型备注
name选择器标识String-
dataUrl图片Base64String-
file图片对象File-
blob图片Blob对象,可用于formDataBlob-

@error(name, { code, msg })

图片选择读取失败事件

属性说明类型备注
name选择器标识String-
code错误标识,见附录String-
msg错误信息,见附录String-

imageProcessor

用于图片轴向修正,图片质量压缩,宽高控制

引入

import imageProcessor from 'mand-mobile/lib/image-reader/image-processor'

/**
 * options 图片处理配置
 * fn(dataUrl, blob) 处理完成回调
 * @return Promise({dataUrl, blob})
 */
imageProcessor(options[, fn])

options

属性说明类型备注
dataUrl图片Base64String-
width图片宽度Number单位px, 宽度超出时等比缩放
height图片高度Number单位px, 高度超出时等比缩放
quality图片质量Number取值范围0-1

附录

图片读取失败错误码和错误信息

'100': 'browser does not support'
'101': 'picture size is beyond the preset'
'102': 'picture read failure'
'103': 'the number of pictures exceeds the limit'