ImagePicker 图片选择器

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

代码演示

简单的图片选择组件

  1. import { ImagePicker } 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. class ImagePickerExample extends React.Component {
  12.   state = {
  13.     files: data,
  14.   }
  15.   onChange = (files, type, index) => {
  16.     console.log(files, type, index);
  17.     this.setState({
  18.       files,
  19.     });
  20.   }
  21.   render() {
  22.     const { files } = this.state;
  23.     return (
  24.       <div>
  25.         <ImagePicker
  26.           files={files}
  27.           onChange={this.onChange}
  28.           onImageClick={(index, fs) => console.log(index, fs)}
  29.           selectable={files.length < 5}
  30.         />
  31.       </div>
  32.     );
  33.   }
  34. }
  36. ReactDOM.render(<ImagePickerExample />, mountNode);

自定义选择图片的方法

  1. import { ImagePicker } 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. class ImagePickerExample extends React.Component {
  12.   state = {
  13.     files: data,
  14.   };
  15.   onChange = (files, type, index) => {
  16.     console.log(files, type, index);
  17.     this.setState({
  18.       files,
  19.     });
  20.   };
  21.   onAddImageClick = (e) => {
  22.     e.preventDefault();
  23.     this.setState({
  24.       files: this.state.files.concat({
  25.         url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  26.         id: '3',
  27.       }),
  28.     });
  29.   };
  30.   onTabChange = (key) => {
  31.     console.log(key);
  32.   };
  33.   render() {
  34.     const { files } = this.state;
  35.     return (
  36.       <div>
  37.         <ImagePicker
  38.           files={files}
  39.           onChange={this.onChange}
  40.           onImageClick={(index, fs) => console.log(index, fs)}
  41.           selectable={files.length < 5}
  42.           onAddImageClick={this.onAddImageClick}
  43.         />
  44.       </div>
  45.     );
  46.   }
  47. }
  49. 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