ImagePicker 图片选择器
- 代码演示
- API

ImagePicker 图片选择器

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

代码演示

import { ImagePicker, WingBlank, SegmentedControl } from 'antd-mobile';
const data = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}, {
  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  id: '2122',
}];
class ImagePickerExample extends React.Component {
  state = {
    files: data,
    multiple: false,
  }
  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  }
  onSegChange = (e) => {
    const index = e.nativeEvent.selectedSegmentIndex;
    this.setState({
      multiple: index === 1,
    });
  }
  render() {
    const { files } = this.state;
    return (
      <WingBlank>
        <SegmentedControl
          values={['切换到单选', '切换到多选']}
          selectedIndex={this.state.multiple ? 1 : 0}
          onChange={this.onSegChange}
        />
        <ImagePicker
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 7}
          multiple={this.state.multiple}
        />
      </WingBlank>
    );
  }
}
ReactDOM.render(<ImagePickerExample />, mountNode);

自定义选择图片的方法

import { ImagePicker } from 'antd-mobile';
const data = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}, {
  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  id: '2122',
}];
class ImagePickerExample extends React.Component {
  state = {
    files: data,
  };
  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  };
  onAddImageClick = (e) => {
    e.preventDefault();
    this.setState({
      files: this.state.files.concat({
        url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
        id: '3',
      }),
    });
  };
  onTabChange = (key) => {
    console.log(key);
  };
  render() {
    const { files } = this.state;
    return (
      <div>
        <ImagePicker
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 5}
          onAddImageClick={this.onAddImageClick}
        />
      </div>
    );
  }
}
ReactDOM.render(<ImagePickerExample />, mountNode);

自定义文件类型

import { ImagePicker } from 'antd-mobile';
const data = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}, {
  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  id: '2122',
}];
class ImagePickerExample extends React.Component {
  state = {
    files: data,
  }
  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  }
  render() {
    const { files } = this.state;
    return (
      <div>
        <ImagePicker
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 5}
          accept="image/gif,image/jpeg,image/jpg,image/png"
        />
      </div>
    );
  }
}
ReactDOM.render(<ImagePickerExample />, mountNode);

自定义数量

import { ImagePicker } from 'antd-mobile';
const data = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}, {
  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  id: '2122',
}];
class ImagePickerExample extends React.Component {
  state = {
    files: data,
  };
  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  };
  onAddImageClick = (e) => {
    e.preventDefault();
    this.setState({
      files: this.state.files.concat({
        url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
        id: '3',
      }),
    });
  };
  onTabChange = (key) => {
    console.log(key);
  };
  render() {
    const { files } = this.state;
    return (
      <div>
        <ImagePicker
          length="6"
          files={files}
          onChange={this.onChange}
          onImageClick={(index, fs) => console.log(index, fs)}
          selectable={files.length < 7}
          onAddImageClick={this.onAddImageClick}
          disableDelete
        />
      </div>
    );
  }
}
ReactDOM.render(<ImagePickerExample />, mountNode);

API

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

ImagePicker图片选择器

ImagePicker 图片选择器

代码演示

API