ImagePicker 图片选择

用户根据提示将自己本地图片（包含本地和云储存）上传到网站，并且可以更改或撤销。

规则

  • 上传时提供大图预览功能。

代码演示

图片选择

简单的图片选择组件

  1. import { ImagePicker, WhiteSpace } from 'antd-mobile';
  3. const ImagePickerExample = React.createClass({
  4.   getInitialState() {
  5.     return {
  6.       files: [{
  7.         url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
  8.         id: '2121',
  9.       }, {
  10.         url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
  11.         id: '2122',
  12.       }, {
  13.         url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
  14.         id: '2123',
  15.       }, {
  16.         url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
  17.         id: '2124',
  18.       }, {
  19.         url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
  20.         id: '2125',
  21.       }, {
  22.         url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
  23.         id: '2126',
  24.       }],
  25.       files2: [],
  26.     };
  27.   },
  28.   render() {
  29.     return (
  30.       <div>
  31.         <ImagePicker
  32.           onChange={(files, type, index) => {
  33.             console.log(files);
  34.             console.log(type);
  35.             console.log(index);
  36.             this.setState({
  37.               files,
  38.             });
  39.           }}
  40.           files={this.state.files}
  41.         />
  42.         <WhiteSpace />
  43.         <ImagePicker
  44.           onChange={(files2, type, index) => {
  45.             console.log(files2);
  46.             console.log(type);
  47.             console.log(index);
  48.             this.setState({
  49.               files2,
  50.             });
  51.           }}
  52.           files={this.state.files2}
  53.         />
  54.       </div>
  55.     );
  56.   },
  57. });
  59. ReactDOM.render(<ImagePickerExample />, mountNode);

ImagePicker图片选择 - 图1

API

TabItem

成员说明类型可选值默认值
files图片文件数组,元素为对象,包含属性url（必选）,可能还有id, orientation,以及业务需要的其它属性Array[]
onChangefiles值发生变化触发的回调, operationType操作类型有添加（add）,移除（remove）,如果是移除操作,则第三个参数代表的是移除图片的索引Function(files, operationType, index)