ImagePicker 图片选择器

注意：只是图片选择器，一般用于上传图片前的文件选择操作，但不包括图片上传的功能. 选择器中使用了Promise，请参考Promise中兼容性的说明. 如果必要，可以参考/docs/react/introduce-cn进行兼容性处理.

代码演示

简单的图片选择组件

  1. import { ImagePicker, WingBlank, SegmentedControl } 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.     multiple: false,
  15.   }
  16.   onChange = (files, type, index) => {
  17.     console.log(files, type, index);
  18.     this.setState({
  19.       files,
  20.     });
  21.   }
  22.   onSegChange = (e) => {
  23.     const index = e.nativeEvent.selectedSegmentIndex;
  24.     this.setState({
  25.       multiple: index === 1,
  26.     });
  27.   }
  29.   render() {
  30.     const { files } = this.state;
  31.     return (
  32.       <WingBlank>
  33.         <SegmentedControl
  34.           values={['切换到单选', '切换到多选']}
  35.           selectedIndex={this.state.multiple ? 1 : 0}
  36.           onChange={this.onSegChange}
  37.         />
  38.         <ImagePicker
  39.           files={files}
  40.           onChange={this.onChange}
  41.           onImageClick={(index, fs) => console.log(index, fs)}
  42.           selectable={files.length < 7}
  43.           multiple={this.state.multiple}
  44.         />
  45.       </WingBlank>
  46.     );
  47.   }
  48. }
  50. 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);

自定义文件类型

  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.   }
  22.   render() {
  23.     const { files } = this.state;
  24.     return (
  25.       <div>
  26.         <ImagePicker
  27.           files={files}
  28.           onChange={this.onChange}
  29.           onImageClick={(index, fs) => console.log(index, fs)}
  30.           selectable={files.length < 5}
  31.           accept="image/gif,image/jpeg,image/jpg,image/png"
  32.         />
  33.       </div>
  34.     );
  35.   }
  36. }
  38. 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.           length="6"
  39.           files={files}
  40.           onChange={this.onChange}
  41.           onImageClick={(index, fs) => console.log(index, fs)}
  42.           selectable={files.length < 7}
  43.           onAddImageClick={this.onAddImageClick}
  44.           disableDelete
  45.         />
  46.       </div>
  47.     );
  48.   }
  49. }
  51. ReactDOM.render(<ImagePickerExample />, mountNode);

ImagePicker图片选择器 - 图1

API

属性说明类型默认值
files图片文件数组,元素为对象,包含属性 url（必选, 可能还有id, orientation, 以及业务需要的其它属性Array[]
onChangefiles 值发生变化触发的回调函数, operationType 操作类型有添加，移除，如果是移除操作，则第三个参数代表的是移除图片的索引(files: Object, operationType: string, index: number): void
onImageClick点击图片触发的回调(index: number, files: Object): void
onAddImageClick自定义选择图片的方法(): void
onFail选择失败(msg: string): void
selectable是否显示添加按钮booleantrue
multiple是否支持多选booleanfalse
accept图片类型stringimage/*
length单行的图片数量string | number4
capture图片捕获设置, 具体请参考MDN中关于capture的说明boolean | stringfalse
disableDelete是否隐藏删除按钮booleanfalse