基础组件 Basic - ImageReader 图片选择器 - 《Mand Mobile v1.x 组件文档》

引入
代码演示
- 图片选择
- 图片选择并轴向修正，压缩处理
  - width: 200 height: 200 quality: 0.1
API
- ImageReader Props
- ImageReader Events
imageProcessor
- 引入
- options
附录

ImageReader 图片选择器

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

引入

import { ImageReader } from 'mand-mobile'
import imageProcessor from 'mand-mobile/lib/image-reader/image-processor' // 图片处理插件，用法参考#imageProcessor
Vue.component(ImageReader.name, ImageReader)

代码演示

图片选择

<template>
  <div class="md-example-child md-example-child-reader md-example-child-reader-0">
    <ul class="image-reader-list">
      <li
        class="image-reader-item"
        v-for="(img, index) in imageList['reader0']"
        :key="index"
        :style="{
          'backgroundImage': `url(${img})`,
          'backgroundPosition': 'center center',
          'backgroundRepeat': 'no-repeat',
          'backgroundSize': 'cover'
        }">
        <md-icon
          class="image-reader-item-del"
          name="circle-cross"
          color="#666"
          @click.native="onDeleteImage('reader0', index)">
        </md-icon>
      </li>
      <li class="image-reader-item add">
        <md-image-reader
          name="reader0"
          @select="onReaderSelect"
          @complete="onReaderComplete"
          @error="onReaderError"
          is-multiple
        ></md-image-reader>
        <md-icon name="hollow-plus" size="md" color="#CCC"></md-icon>
        <p>上传照片</p>
      </li>
    </ul>
  </div>
</template>
<script>
import {Icon, ImageReader, Toast} from 'mand-mobile'
export default {
  name: 'image-reader-demo',
  components: {
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
  },
  data() {
    return {
      imageList: {
        reader0: [
          '//img-hxy021.didistatic.com/static/strategymis/insurancePlatform_spu/uploads/27fb7f097ca218d743f816836bc7ea4a',
          '//manhattan.didistatic.com/static/manhattan/insurancePlatform_spu/uploads/c2912793a222eb24b606a582fd849ab7',
        ],
        reader1: [],
      },
    }
  },
  methods: {
    onReaderSelect(name, {files}) {
      files.forEach(file => {
        console.log('[Mand Mobile] ImageReader Selected:', 'File Name ' + file.name)
      })
      Toast.loading('图片读取中...')
    },
    onReaderComplete(name, {dataUrl, file}) {
      const demoImageList = this.imageList[name] || []
      console.log('[Mand Mobile] ImageReader Complete:', 'File Name ' + file.name)
      demoImageList.push(dataUrl)
      this.$set(this.imageList, name, demoImageList)
      Toast.hide()
    },
    onReaderError(name, {msg}) {
      Toast.failed(msg)
    },
    onDeleteImage(name, index) {
      const demoImageList = this.imageList[name] || []
      demoImageList.splice(index, 1)
      this.$set(this.imageList, name, demoImageList)
    },
  },
}
</script>
<style lang="stylus" scoped>
.md-example-child-reader
  .image-reader-list
    float left 
    width 100%
    .image-reader-item
      position relative
      float left
      width 23.5%
      padding-bottom 23.5%
      margin-bottom 2%
      margin-right 2%
      background color-bg-base
      box-sizing border-box
      list-style none
      border-radius radius-normal
      hairline(all, color-border-base)
      background-size cover
      &:nth-of-type(4n)
        margin-right 0
      &.add 
        .md-icon
          position absolute
          top 40%
          left 50%
          transform translate(-50%, -50%)
          opacity .5
        p
          position absolute
          top 50%
          left 0
          width 100%
          margin-top 15px
          font-size font-minor-normal
          color color-text-disabled 
          text-align center
      .image-reader-item-del
        position absolute
        top 5px
        right 5px
        z-index 3
        background #EEE
        border-radius radius-circle
</style>

图片选择并轴向修正，压缩处理

width: 200 height: 200 quality: 0.1

<template>
  <div class="md-example-child md-example-child-reader md-example-child-reader-1">
    <ul class="image-reader-list">
      <li
        class="image-reader-item"
        v-for="(img, index) in imageList['reader1']"
        :key="index"
        :style="{
          'backgroundImage': `url(${img})`,
          'backgroundPosition': 'center center',
          'backgroundRepeat': 'no-repeat',
          'backgroundSize': 'cover'
        }">
        <md-icon
          class="image-reader-item-del"
          name="circle-cross"
          color="#666"
          @click.native="onDeleteImage('reader1', index)">
        </md-icon>
      </li>
      <li class="image-reader-item add">
        <md-image-reader
          name="reader1"
          @select="onReaderSelect"
          @complete="onReaderComplete"
          @error="onReaderError"
          is-multiple
        ></md-image-reader>
        <md-icon name="hollow-plus" size="md" color="#CCC"></md-icon>
        <p>上传照片</p>
      </li>
    </ul>
  </div>
</template>
<script>
import {Icon, ImageReader, Toast} from 'mand-mobile'
import imageProcessor from 'mand-mobile/components/image-reader/image-processor'
export default {
  name: 'image-reader-demo',
  components: {
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
  },
  data() {
    return {
      imageList: {
        reader0: [
          '//img-hxy021.didistatic.com/static/strategymis/insurancePlatform_spu/uploads/27fb7f097ca218d743f816836bc7ea4a',
          '//manhattan.didistatic.com/static/manhattan/insurancePlatform_spu/uploads/c2912793a222eb24b606a582fd849ab7',
        ],
        reader1: [],
      },
    }
  },
  methods: {
    onReaderSelect() {
      Toast.loading('图片读取中...')
    },
    onReaderComplete(name, {dataUrl}) {
      const demoImageList = this.imageList[name] || []
      imageProcessor({
        dataUrl,
        width: 200,
        height: 200,
        quality: 0.1,
      }).then(({dataUrl}) => {
        dataUrl && demoImageList.push(dataUrl)
      })
      this.$set(this.imageList, name, demoImageList)
      Toast.hide()
    },
    onReaderError(name, {msg}) {
      Toast.failed(msg)
    },
    onDeleteImage(name, index) {
      const demoImageList = this.imageList[name] || []
      demoImageList.splice(index, 1)
      this.$set(this.imageList, name, demoImageList)
    },
  },
}
</script>
<style lang="stylus" scoped>
.md-example-child-reader
  .image-reader-list
    float left
    width 100%
    .image-reader-item
      position relative
      float left
      width 23.5%
      padding-bottom 23.5%
      margin-bottom 2%
      margin-right 2%
      background color-bg-base
      box-sizing border-box
      list-style none
      border-radius radius-normal
      hairline(all, color-border-base)
      background-size cover
      &:nth-of-type(4n)
        margin-right 0
      &.add
        .md-icon
          position absolute
          top 40%
          left 50%
          transform translate(-50%, -50%)
          opacity .5
        p
          position absolute
          top 50%
          left 0
          width 100%
          margin-top 15px
          font-size font-minor-normal
          color color-text-disabled
          text-align center
      .image-reader-item-del
        position absolute
        top 5px
        right 5px
        z-index 3
        background #EEE
        border-radius radius-circle
</style>

API

ImageReader Props

属性	说明	类型	默认值	备注
name	标识	String	-	可用于区分多个选择器
size	图片尺寸限制	String/Number	-	单位`kb`
mime	支持图片类型	Array	`*`	如`['jpeg','png']`
is-camera-only	是否只支持拍照	Boolean	`false`	-
is-multiple	是否支持选择多张	Boolean	`false`	-
amount	选择多张	Number	-	只在`is-multiple`为`true`时有效

ImageReader Events

@select(name, { files })

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

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

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

图片选择读取完成事件

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

@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'