ImagePicker 图片选择器

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

代码演示

简单的图片选择组件

  1. import { ImagePicker, Button } from 'antd-mobile';
  3. const data = [{
  4.   url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  5.   id: '2121',
  6. }, {
  7.   url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  8.   id: '2122',
  9. }];
  11. const ImagePickerExample = React.createClass({
  12.   getInitialState() {
  13.     return { files: data, custom: false };
  14.   },
  15.   onChange(files, type, index) {
  16.     console.log(files, type, index);
  17.     this.setState({
  18.       files,
  19.     });
  20.   },
  21.   onAddImageClick() {
  22.     this.setState({
  23.       files: this.state.files.concat({
  24.         url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  25.         id: '3',
  26.       }),
  27.     });
  28.   },
  29.   sw() {
  30.     this.setState({
  31.       custom: !this.state.custom,
  32.     });
  33.   },
  34.   render() {
  35.     const { files, custom } = this.state;
  36.     return (<div>
  37.       <Button inline style={{ margin: 10 }} onClick={this.sw}>{custom ? '自定义' : '常用的'}选择图片的方法</Button>
  38.       {custom ? <ImagePicker
  39.         files={files}
  40.         onChange={this.onChange}
  41.         onImageClick={(index, fs) => console.log(index, fs)}
  42.         onAddImageClick={this.onAddImageClick}
  43.         selectable={files.length < 5}
  44.       /> : <ImagePicker
  45.         files={files}
  46.         onChange={this.onChange}
  47.         onImageClick={(index, fs) => console.log(index, fs)}
  48.         selectable={files.length < 5}
  49.       />}
  50.     </div>);
  51.   },
  52. });
  54. ReactDOM.render(<ImagePickerExample />, mountNode);

ImagePicker图片选择器 - 图1

API ( 适用平台：WEB、React-Native )

成员说明类型默认值
files图片文件数组,元素为对象,包含属性 url（必选, 可能还有id, orientation, 以及业务需要的其它属性Array[]
onChangefiles 值发生变化触发的回调函数, operationType 操作类型有添加，移除，如果是移除操作，则第三个参数代表的是移除图片的索引(files: Object, operationType: string, index: number): void
onImageClick(web only)点击图片触发的回调(index: number, files: Object): void
onAddImageClick(web only)自定义选择图片的方法(): void
selectable(web only)是否显示添加按钮booleantrue

注: RN 版本回传 assets-library (性能考虑)，需要使用 native 模块进行上传，可参考 https://github.com/facebook/react-native/issues/201