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	是否只支持拍照	Boolean	`false`
max-amount	选择多张	Number		只在`is-multiple`为`true`时有效
is-multiple	是否支持选择多张	Boolean	`false`	存在兼容问题
accept	支持图片类型	Array	`*`	如`['jpeg','png']`
disabled	是否禁用	Boolean	false
is-processor	是否开启图片质量压缩	Boolean	false

ImageReader Events

@select(name, { files })

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

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

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

图片选择读取完成事件

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

@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	图片Base64	String	-
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'

图标

图片浏览器

# ImageReader 图片选择器

# 引入

# 代码演示

# API

# ImageReader Props

# ImageReader Events

# @select(name, { files })

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

# @error(name, { code, msg })

# imageProcessor

# 引入

# options

# 附录

ImageReader 图片选择器

引入

代码演示

API

ImageReader Props

ImageReader Events

@select(name, { files })

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

@error(name, { code, msg })

imageProcessor

引入

options

附录