Upload上传

    上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。

    • 当需要上传一个或一些文件时。

    • 当需要展现上传的进度时。

    • 当需要使用拖拽交互时。

    点击上传

    经典款式，用户点击按钮弹出文件选择框。

    Upload上传 - 图2

    使用 设置已上传的内容。

    1. import { Upload, Button, Icon } from 'antd';
    3. const props = {
    4.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    5.   onChange({ file, fileList }) {
    6.     if (file.status !== 'uploading') {
    7.       console.log(file, fileList);
    8.     }
    9.   },
    10.   defaultFileList: [
    11.     {
    12.       uid: '1',
    13.       name: 'xxx.png',
    14.       status: 'done',
    15.       response: 'Server Error 500', // custom error message to show
    16.       url: 'http://www.baidu.com/xxx.png',
    17.     },
    18.     {
    19.       uid: '2',
    20.       name: 'yyy.png',
    21.       status: 'done',
    22.       url: 'http://www.baidu.com/yyy.png',
    23.     },
    24.     {
    25.       uid: '3',
    26.       name: 'zzz.png',
    27.       status: 'error',
    28.       response: 'Server Error 500', // custom error message to show
    29.       url: 'http://www.baidu.com/zzz.png',
    30.     },
    31.   ],
    32. };
    34. ReactDOM.render(
    35.   <Upload {...props}>
    36.     <Button>
    37.       <Icon type="upload" /> Upload
    38.     </Button>
    39.   </Upload>,
    40.   mountNode,
    41. );

    完全控制的上传列表

    使用 fileList 对列表进行完全控制，可以实现各种自定义功能，以下演示三种情况：

    • 上传列表数量的限制。

    • 读取远程路径并显示链接。

    1. import { Upload, Button, Icon } from 'antd';
    3. class MyUpload extends React.Component {
    4.   state = {
    5.     fileList: [
    6.       {
    7.         uid: '-1',
    8.         name: 'xxx.png',
    9.         status: 'done',
    10.         url: 'http://www.baidu.com/xxx.png',
    11.       },
    12.     ],
    13.   };
    15.   handleChange = info => {
    16.     let fileList = [...info.fileList];
    18.     // 1. Limit the number of uploaded files
    19.     // Only to show two recent uploaded files, and old ones will be replaced by the new
    20.     fileList = fileList.slice(-2);
    22.     // 2. Read from response and show file link
    23.     fileList = fileList.map(file => {
    24.       if (file.response) {
    25.         // Component will show file.url as link
    26.         file.url = file.response.url;
    27.       }
    28.       return file;
    29.     });
    31.     this.setState({ fileList });
    32.   };
    34.   render() {
    35.     const props = {
    36.       action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    37.       onChange: this.handleChange,
    38.       multiple: true,
    39.     };
    40.     return (
    41.       <Upload {...props} fileList={this.state.fileList}>
    42.         <Button>
    43.           <Icon type="upload" /> Upload
    44.         </Button>
    45.       </Upload>
    46.     );
    47.   }
    48. }
    50. ReactDOM.render(<MyUpload />, mountNode);

    支持上传一个文件夹里的所有文件。

    1. import { Upload, Button, Icon } from 'antd';
    3. ReactDOM.render(
    4.   <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
    5.     <Button>
    6.       <Icon type="upload" /> Upload Directory
    7.     </Button>
    8.   </Upload>,
    9.   mountNode,
    10. );

    Upload上传 - 图5

    图片列表样式

    上传文件为图片，可展示本地缩略图。IE8/9 不支持浏览器本地缩略图展示（），可以写 thumbUrl 属性来代替。

    1. import { Upload, Button, Icon } from 'antd';
    3. const fileList = [
    4.   {
    5.     uid: '-1',
    6.     name: 'xxx.png',
    7.     status: 'done',
    8.     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    9.     thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    10.   },
    11.   {
    12.     uid: '-2',
    13.     name: 'yyy.png',
    14.     status: 'done',
    15.     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    16.     thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    17.   },
    18. ];
    20. const props = {
    21.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    22.   listType: 'picture',
    23.   defaultFileList: [...fileList],
    24. };
    26. const props2 = {
    27.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    28.   listType: 'picture',
    29.   defaultFileList: [...fileList],
    30.   className: 'upload-list-inline',
    31. };
    32. ReactDOM.render(
    33.   <div>
    34.     <Upload {...props}>
    35.       <Button>
    36.         <Icon type="upload" /> Upload
    37.       </Button>
    38.     </Upload>
    39.     <br />
    40.     <br />
    41.     <Upload {...props2}>
    42.       <Button>
    43.         <Icon type="upload" /> Upload
    45.     </Upload>
    46.   </div>,
    47.   mountNode,
    48. );

    用户头像

    点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小。

    1. import { Upload, Icon, message } from 'antd';
    3. function getBase64(img, callback) {
    4.   const reader = new FileReader();
    5.   reader.addEventListener('load', () => callback(reader.result));
    6.   reader.readAsDataURL(img);
    7. }
    9. function beforeUpload(file) {
    10.   const isJPG = file.type === 'image/jpeg';
    11.   if (!isJPG) {
    12.     message.error('You can only upload JPG file!');
    13.   }
    14.   const isLt2M = file.size / 1024 / 1024 < 2;
    15.   if (!isLt2M) {
    16.     message.error('Image must smaller than 2MB!');
    17.   }
    18.   return isJPG && isLt2M;
    19. }
    21. class Avatar extends React.Component {
    22.   state = {
    23.     loading: false,
    24.   };
    26.   handleChange = info => {
    27.     if (info.file.status === 'uploading') {
    28.       this.setState({ loading: true });
    29.       return;
    30.     }
    31.     if (info.file.status === 'done') {
    32.       // Get this url from response in real world.
    33.       getBase64(info.file.originFileObj, imageUrl =>
    34.         this.setState({
    35.           imageUrl,
    36.           loading: false,
    37.         }),
    38.       );
    39.     }
    40.   };
    42.   render() {
    43.     const uploadButton = (
    44.       <div>
    45.         <Icon type={this.state.loading ? 'loading' : 'plus'} />
    46.         <div className="ant-upload-text">Upload</div>
    47.       </div>
    48.     );
    49.     const { imageUrl } = this.state;
    50.     return (
    51.       <Upload
    52.         name="avatar"
    53.         listType="picture-card"
    54.         className="avatar-uploader"
    55.         showUploadList={false}
    56.         action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    57.         beforeUpload={beforeUpload}
    58.         onChange={this.handleChange}
    59.       >
    60.         {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
    61.       </Upload>
    62.     );
    63.   }
    64. }
    66. ReactDOM.render(<Avatar />, mountNode);
    1. .avatar-uploader > .ant-upload {
    2.   width: 128px;
    3.   height: 128px;
    4. }

    Upload上传 - 图7

    用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。

    1. import { Upload, Icon, Modal } from 'antd';
    3. function getBase64(file) {
    4.   return new Promise((resolve, reject) => {
    5.     const reader = new FileReader();
    6.     reader.readAsDataURL(file);
    7.     reader.onload = () => resolve(reader.result);
    8.     reader.onerror = error => reject(error);
    9.   });
    10. }
    12. class PicturesWall extends React.Component {
    13.   state = {
    14.     previewVisible: false,
    15.     previewImage: '',
    16.     fileList: [
    17.       {
    18.         uid: '-1',
    19.         name: 'xxx.png',
    20.         status: 'done',
    21.         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    22.       },
    23.     ],
    24.   };
    26.   handleCancel = () => this.setState({ previewVisible: false });
    28.   handlePreview = async file => {
    29.     if (!file.url && !file.preview) {
    30.       file.preview = await getBase64(file.originFileObj);
    31.     }
    33.     this.setState({
    34.       previewImage: file.url || file.preview,
    35.       previewVisible: true,
    36.     });
    37.   };
    39.   handleChange = ({ fileList }) => this.setState({ fileList });
    41.   render() {
    42.     const { previewVisible, previewImage, fileList } = this.state;
    43.     const uploadButton = (
    44.       <div>
    45.         <Icon type="plus" />
    46.         <div className="ant-upload-text">Upload</div>
    47.       </div>
    48.     );
    49.     return (
    50.       <div className="clearfix">
    51.         <Upload
    52.           action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    53.           listType="picture-card"
    54.           fileList={fileList}
    55.           onPreview={this.handlePreview}
    56.           onChange={this.handleChange}
    57.         >
    58.           {fileList.length >= 3 ? null : uploadButton}
    59.         </Upload>
    60.           <img alt="example" style={{ width: '100%' }} src={previewImage} />
    61.         </Modal>
    62.       </div>
    63.     );
    64.   }
    65. }
    67. ReactDOM.render(<PicturesWall />, mountNode);
    1. /* you can make up upload button and sample style by using stylesheets */
    2. .ant-upload-select-picture-card i {
    3.   font-size: 32px;
    4.   color: #999;
    7. .ant-upload-select-picture-card .ant-upload-text {
    8.   margin-top: 8px;
    9.   color: #666;
    10. }

    拖拽上传

    把文件拖入指定区域，完成上传，同样支持点击上传。

    Upload上传 - 图9

    beforeUpload 返回 false 后，手动上传文件。

    1. import { Upload, Button, Icon, message } from 'antd';
    2. import reqwest from 'reqwest';
    4. class Demo extends React.Component {
    5.   state = {
    6.     fileList: [],
    7.     uploading: false,
    8.   };
    10.   handleUpload = () => {
    11.     const { fileList } = this.state;
    12.     const formData = new FormData();
    13.     fileList.forEach(file => {
    14.       formData.append('files[]', file);
    15.     });
    17.     this.setState({
    18.       uploading: true,
    19.     });
    21.     // You can use any AJAX library you like
    22.     reqwest({
    23.       url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    24.       method: 'post',
    25.       processData: false,
    26.       data: formData,
    27.       success: () => {
    28.         this.setState({
    29.           fileList: [],
    30.           uploading: false,
    31.         });
    32.         message.success('upload successfully.');
    33.       },
    34.       error: () => {
    35.         this.setState({
    36.           uploading: false,
    37.         });
    38.         message.error('upload failed.');
    39.       },
    40.     });
    41.   };
    43.   render() {
    44.     const { uploading, fileList } = this.state;
    45.     const props = {
    46.       onRemove: file => {
    47.         this.setState(state => {
    48.           const index = state.fileList.indexOf(file);
    49.           const newFileList = state.fileList.slice();
    50.           newFileList.splice(index, 1);
    51.           return {
    52.             fileList: newFileList,
    53.           };
    54.         });
    55.       },
    56.       beforeUpload: file => {
    57.         this.setState(state => ({
    58.           fileList: [...state.fileList, file],
    59.         }));
    60.         return false;
    61.       },
    62.       fileList,
    63.     };
    65.     return (
    66.       <div>
    67.         <Upload {...props}>
    68.           <Button>
    69.             <Icon type="upload" /> Select File
    70.           </Button>
    71.         </Upload>
    72.         <Button
    73.           type="primary"
    74.           onClick={this.handleUpload}
    75.           disabled={fileList.length === 0}
    76.           loading={uploading}
    77.           style={{ marginTop: 16 }}
    78.         >
    79.           {uploading ? 'Uploading' : 'Start Upload'}
    80.         </Button>
    81.       </div>
    82.     );
    83.   }
    84. }
    86. ReactDOM.render(<Demo />, mountNode);

    自定义预览

    自定义本地预览，用于处理非图片格式文件（例如视频文件）。

    1. import { Upload, Button, Icon } from 'antd';
    3. const props = {
    4.   action: '//jsonplaceholder.typicode.com/posts/',
    5.   listType: 'picture',
    6.   previewFile(file) {
    7.     console.log('Your upload file:', file);
    8.     // Your process logic. Here we just mock to the same file
    9.     return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
    10.       method: 'POST',
    11.       body: file,
    12.     })
    13.       .then(res => res.json())
    14.       .then(({ thumbnail }) => thumbnail);
    15.   },
    16. };
    18. ReactDOM.render(
    19.   <div>
    20.     <Upload {...props}>
    21.       <Button>
    22.         <Icon type="upload" /> Upload
    23.       </Button>
    24.     </Upload>
    25.   </div>,
    26.   mountNode,
    27. );

    上传中、完成、失败都会调用这个函数。

    文件状态改变的回调，返回为：

    1. {
    2.   file: { /* ... */ },
    3.   fileList: [ /* ... */ ],
    4.   event: { /* ... */ },
    5. }
    • file 当前操作的文件对象。
    1. {
    2.    uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
    3.    name: 'xx.png'   // 文件名
    4.    status: 'done', // 状态有：uploading done error removed
    5.    response: '{"status": "success"}', // 服务端响应内容
    6.    linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    7. }

    • 当前的文件列表。

    • event 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。

    • 如果要做本地 mock 可以参考这个 。

    请使用 fileList 属性设置数组项的 url 属性进行展示控制。

    请参考 https://github.com/react-component/upload#customrequest。

    请参考 。