Uploader 图片上传

简单的图片上传,可以删除已选照片,或者选择新图片,通过onChange事件将新的图片数组传递给父组件,父组件处理完后,将结果更新到files。 orientation值代表图片方向,请参考http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side### 定义／Definition#用户根据提示将自己本地的相应图片（包含本地和云储存）上传到网站，并且可以更改或撤销上传行为。

规则 / Rule

  • 图片上传时需要提供大图预览功能；

  • 图片尺寸自定义，图片之间间距为4*n，一般根据容器大小进行栅格布局，一行的上限是4张并列图片。

代码演示

图片上传

简单的图片上传组件

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

Uploader图片上传 - 图1

API

TabItem

成员说明类型可选值默认值
files图片文件数组,元素为对象,包含属性url（必选）,可能还有id, orientation,以及业务需要的其它属性Array[]
onChangefiles值发生变化触发的回调Function(files)