ImagePicker 图片选择器

图片选择器，一般用于上传图片前的文件选择操作，但不包括图片上传的功能

使用指南

Taro-UI 版本需要在 v1.5.0 以上，在 Taro 文件中引入组件

import { AtImagePicker } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/image-picker.scss";
@import "~taro-ui/dist/style/components/icon.scss";

一般用法

说明

• 该组件为受控组件，开发者需要通过 onChange 事件来更新 files，files 与 onChange 函数必填

• 该组件使用Taro.chooseImage实现选取图片，会受到Taro能力的制约，具体请参考Taro文档

• 开发者可以获取 files 数据并通过 Taro.uploadFile 上传图片

import Taro from '@tarojs/taro'
import { AtImagePicker } from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      files: [{
        url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
      },
      {
        url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
      },
      {
        url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
      }]
    }
  }
  onChange (files) {
    this.setState({
      files
    })
  }
  onFail (mes) {
    console.log(mes)
  }
  onImageClick (index, file) {
    console.log(index, file)
  }
  render () {
    return (
      <AtImagePicker
        files={this.state.files}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

多选图片

<AtImagePicker
  multiple
  files={this.state.files}
  onChange={this.onChange.bind(this)}
  onFail={this.onFail.bind(this)}
  onImageClick={this.onImageClick.bind(this)}
/>

自定义数量

<AtImagePicker
  length={5}
  files={this.state.files}
  onChange={this.onChange.bind(this)}
  onFail={this.onFail.bind(this)}
  onImageClick={this.onImageClick.bind(this)}
/>

多种图片预览模式

<AtImagePicker
  mode='top'
  files={this.state.files}
  onChange={this.onChange.bind(this)}
  onFail={this.onFail.bind(this)}
  onImageClick={this.onImageClick.bind(this)}
/>

参数

事件