Upload上传

文件选择上传和拖拽上传控件。

何时使用

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

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

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

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

代码演示

Upload上传 - 图1

点击上传

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

  1. import { Upload, message, Button } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  4. const props = {
  5.   name: 'file',
  6.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  7.   headers: {
  8.     authorization: 'authorization-text',
  9.   },
  10.   onChange(info) {
  11.     if (info.file.status !== 'uploading') {
  12.       console.log(info.file, info.fileList);
  13.     }
  14.     if (info.file.status === 'done') {
  15.       message.success(`${info.file.name} file uploaded successfully`);
  16.     } else if (info.file.status === 'error') {
  17.       message.error(`${info.file.name} file upload failed.`);
  18.     }
  19.   },
  20. };
  22. ReactDOM.render(
  23.   <Upload {...props}>
  24.     <Button icon={<UploadOutlined />}>Click to Upload</Button>
  25.   </Upload>,
  26.   mountNode,
  27. );

Upload上传 - 图2

已上传的文件列表

使用 defaultFileList 设置已上传的内容。

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

Upload上传 - 图3

完全控制的上传列表

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

  1. 上传列表数量的限制。

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

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

Upload上传 - 图4

文件夹上传

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

  1. import { Upload, Button } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  4. ReactDOM.render(
  5.   <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
  6.     <Button icon={<UploadOutlined />}>Upload Directory</Button>
  7.   </Upload>,
  8.   mountNode,
  9. );

Upload上传 - 图5

只上传 png 图片

beforeUpload 返回 false 或 Promise.reject 时，只用于拦截上传行为，不会阻止文件进入上传列表（原因）。如果需要阻止列表展现，可以参照此例配合 onChange 进行实现。

  1. import React, { useState } from 'react';
  2. import { Upload, Button, message } from 'antd';
  3. import { UploadOutlined } from '@ant-design/icons';
  5. const Uploader = () => {
  6.   const [fileList, updateFileList] = useState([]);
  7.   const props = {
  8.     fileList,
  9.     beforeUpload: file => {
  10.       if (file.type !== 'image/png') {
  11.         message.error(`${file.name} is not a png file`);
  12.       }
  13.       return file.type === 'image/png';
  14.     },
  15.     onChange: info => {
  16.       console.log(info.fileList);
  17.       // file.status is empty when beforeUpload return false
  18.       updateFileList(info.fileList.filter(file => !!file.status));
  19.     },
  20.   };
  21.   return (
  22.     <Upload {...props}>
  23.       <Button icon={<UploadOutlined />}>Upload png only</Button>
  24.     </Upload>
  25.   );
  26. };
  28. ReactDOM.render(<Uploader />, mountNode);

Upload上传 - 图6

自定义预览

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

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

Upload上传 - 图7

阿里云 OSS

使用阿里云 OSS 上传示例.

  1. import { Form, Upload, message, Button } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  4. class AliyunOSSUpload extends React.Component {
  5.   state = {
  6.     OSSData: {},
  7.   };
  9.   async componentDidMount() {
  10.     await this.init();
  11.   }
  13.   init = async () => {
  14.     try {
  15.       const OSSData = await this.mockGetOSSData();
  17.       this.setState({
  18.         OSSData,
  19.       });
  20.     } catch (error) {
  21.       message.error(error);
  22.     }
  23.   };
  25.   // Mock get OSS api
  26.   // https://help.aliyun.com/document_detail/31988.html
  27.   mockGetOSSData = () => ({
  28.     dir: 'user-dir/',
  29.     expire: '1577811661',
  30.     host: '//www.mocky.io/v2/5cc8019d300000980a055e76',
  31.     accessId: 'c2hhb2RhaG9uZw==',
  32.     policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==',
  33.     signature: 'ZGFob25nc2hhbw==',
  34.   });
  36.   onChange = ({ fileList }) => {
  37.     const { onChange } = this.props;
  38.     console.log('Aliyun OSS:', fileList);
  39.     if (onChange) {
  40.       onChange([...fileList]);
  41.     }
  42.   };
  44.   onRemove = file => {
  45.     const { value, onChange } = this.props;
  47.     const files = value.filter(v => v.url !== file.url);
  49.     if (onChange) {
  50.       onChange(files);
  51.     }
  52.   };
  54.   getExtraData = file => {
  55.     const { OSSData } = this.state;
  57.     return {
  58.       key: file.url,
  59.       OSSAccessKeyId: OSSData.accessId,
  60.       policy: OSSData.policy,
  61.       Signature: OSSData.signature,
  62.     };
  63.   };
  65.   beforeUpload = async file => {
  66.     const { OSSData } = this.state;
  67.     const expire = OSSData.expire * 1000;
  69.     if (expire < Date.now()) {
  70.       await this.init();
  71.     }
  73.     const suffix = file.name.slice(file.name.lastIndexOf('.'));
  74.     const filename = Date.now() + suffix;
  75.     file.url = OSSData.dir + filename;
  77.     return file;
  78.   };
  80.   render() {
  81.     const { value } = this.props;
  82.     const props = {
  83.       name: 'file',
  84.       fileList: value,
  85.       action: this.state.OSSData.host,
  86.       onChange: this.onChange,
  87.       onRemove: this.onRemove,
  88.       data: this.getExtraData,
  89.       beforeUpload: this.beforeUpload,
  90.     };
  91.     return (
  92.       <Upload {...props}>
  93.         <Button icon={<UploadOutlined />}>Click to Upload</Button>
  94.       </Upload>
  95.     );
  96.   }
  97. }
  99. const FormPage = () => (
  100.   <Form labelCol={{ span: 4 }}>
  101.     <Form.Item label="Photos" name="photos">
  102.       <AliyunOSSUpload />
  103.     </Form.Item>
  104.   </Form>
  105. );
  107. ReactDOM.render(<FormPage />, mountNode);

Upload上传 - 图8

上传列表拖拽排序

使用 itemRender ，我们可以集成 react-dnd 来实现对上传列表拖拽排序。

  1. import React, { useState, useCallback, useRef } from 'react';
  2. import { Upload, Button, Tooltip } from 'antd';
  3. import { DndProvider, useDrag, useDrop, createDndContext } from 'react-dnd';
  4. import { HTML5Backend } from 'react-dnd-html5-backend';
  5. import update from 'immutability-helper';
  6. import { UploadOutlined } from '@ant-design/icons';
  8. const RNDContext = createDndContext(HTML5Backend);
  10. const type = 'DragableUploadList';
  12. const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
  13.   const ref = React.useRef();
  14.   const index = fileList.indexOf(file);
  15.   const [{ isOver, dropClassName }, drop] = useDrop({
  16.     accept: type,
  17.     collect: monitor => {
  18.       const { index: dragIndex } = monitor.getItem() || {};
  19.       if (dragIndex === index) {
  20.         return {};
  21.       }
  22.       return {
  23.         isOver: monitor.isOver(),
  24.         dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
  25.       };
  26.     },
  27.     drop: item => {
  28.       moveRow(item.index, index);
  29.     },
  30.   });
  31.   const [, drag] = useDrag({
  32.     item: { type, index },
  33.     collect: monitor => ({
  34.       isDragging: monitor.isDragging(),
  35.     }),
  36.   });
  37.   drop(drag(ref));
  38.   const errorNode = (
  39.     <Tooltip title="Upload Error" getPopupContainer={() => document.body}>
  40.       {originNode.props.children}
  41.     </Tooltip>
  42.   );
  43.   return (
  44.     <div
  45.       ref={ref}
  46.       className={`ant-upload-draggable-list-item ${isOver ? dropClassName : ''}`}
  47.       style={{ cursor: 'move' }}
  48.     >
  49.       {file.status === 'error' ? errorNode : originNode}
  50.     </div>
  51.   );
  52. };
  54. const DragSortingUpload: React.FC = () => {
  55.   const [fileList, setFileList] = useState([
  56.     {
  57.       uid: '-1',
  58.       name: 'image1.png',
  59.       status: 'done',
  60.       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  61.     },
  62.     {
  63.       uid: '-2',
  64.       name: 'image2.png',
  65.       status: 'done',
  66.       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  67.     },
  68.     {
  69.       uid: '-3',
  70.       name: 'image3.png',
  71.       status: 'done',
  72.       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  73.     },
  74.     {
  75.       uid: '-4',
  76.       name: 'image4.png',
  77.       status: 'done',
  78.       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  79.     },
  80.     {
  81.       uid: '-5',
  82.       name: 'image.png',
  83.       status: 'error',
  84.     },
  85.   ]);
  87.   const moveRow = useCallback(
  88.     (dragIndex, hoverIndex) => {
  89.       const dragRow = fileList[dragIndex];
  90.       setFileList(
  91.         update(fileList, {
  92.           $splice: [
  93.             [dragIndex, 1],
  94.             [hoverIndex, 0, dragRow],
  95.           ],
  96.         }),
  97.       );
  98.     },
  99.     [fileList],
  100.   );
  102.   const manager = useRef(RNDContext);
  104.   const onChange = ({ fileList: newFileList }) => {
  105.     setFileList(newFileList);
  106.   };
  108.   return (
  109.     <DndProvider manager={manager.current.dragDropManager}>
  110.       <Upload
  111.         action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  112.         fileList={fileList}
  113.         onChange={onChange}
  114.         itemRender={(originNode, file, currFileList) => (
  115.           <DragableUploadListItem
  116.             originNode={originNode}
  117.             file={file}
  118.             fileList={currFileList}
  119.             moveRow={moveRow}
  120.           />
  121.         )}
  122.       >
  123.         <Button>
  124.           <UploadOutlined /> Click to Upload
  125.         </Button>
  126.       </Upload>
  127.     </DndProvider>
  128.   );
  129. };
  131. ReactDOM.render(<DragSortingUpload />, mountNode);
  1. #components-upload-demo-drag-sorting .ant-upload-draggable-list-item {
  2.   border-top: 2px dashed rgba(0, 0, 0, 0);
  3.   border-bottom: 2px dashed rgba(0, 0, 0, 0);
  4. }
  5. #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-downward {
  6.   border-bottom-color: #1890ff;
  7. }
  9. #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward {
  10.   border-top-color: #1890ff;
  11. }

Upload上传 - 图9

自定义进度条样式

使用 progress 属性自定义进度条样式。

  1. import { Upload, message, Button } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  4. const props = {
  5.   name: 'file',
  6.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  7.   headers: {
  8.     authorization: 'authorization-text',
  9.   },
  10.   onChange(info) {
  11.     if (info.file.status !== 'uploading') {
  12.       console.log(info.file, info.fileList);
  13.     }
  14.     if (info.file.status === 'done') {
  15.       message.success(`${info.file.name} file uploaded successfully`);
  16.     } else if (info.file.status === 'error') {
  17.       message.error(`${info.file.name} file upload failed.`);
  18.     }
  19.   },
  20.   progress: {
  21.     strokeColor: {
  22.       '0%': '#108ee9',
  23.       '100%': '#87d068',
  24.     },
  25.     strokeWidth: 3,
  26.     format: percent => `${parseFloat(percent.toFixed(2))}%`,
  27.   },
  28. };
  30. ReactDOM.render(
  31.   <Upload {...props}>
  32.     <Button icon={<UploadOutlined />}>Click to Upload</Button>
  33.   </Upload>,
  34.   mountNode,
  35. );

Upload上传 - 图10

用户头像

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

beforeUpload 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等：示例。

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

Upload上传 - 图11

照片墙

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

  1. import { Upload, Modal } from 'antd';
  2. import { PlusOutlined } from '@ant-design/icons';
  4. function getBase64(file) {
  5.   return new Promise((resolve, reject) => {
  6.     const reader = new FileReader();
  7.     reader.readAsDataURL(file);
  8.     reader.onload = () => resolve(reader.result);
  9.     reader.onerror = error => reject(error);
  10.   });
  11. }
  13. class PicturesWall extends React.Component {
  14.   state = {
  15.     previewVisible: false,
  16.     previewImage: '',
  17.     previewTitle: '',
  18.     fileList: [
  19.       {
  20.         uid: '-1',
  21.         name: 'image.png',
  22.         status: 'done',
  23.         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  24.       },
  25.       {
  26.         uid: '-2',
  27.         name: 'image.png',
  28.         status: 'done',
  29.         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  30.       },
  31.       {
  32.         uid: '-3',
  33.         name: 'image.png',
  34.         status: 'done',
  35.         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  36.       },
  37.       {
  38.         uid: '-4',
  39.         name: 'image.png',
  40.         status: 'done',
  41.         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  42.       },
  43.       {
  44.         uid: '-xxx',
  45.         percent: 50,
  46.         name: 'image.png',
  47.         status: 'uploading',
  48.         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  49.       },
  50.       {
  51.         uid: '-5',
  52.         name: 'image.png',
  53.         status: 'error',
  54.       },
  55.     ],
  56.   };
  58.   handleCancel = () => this.setState({ previewVisible: false });
  60.   handlePreview = async file => {
  61.     if (!file.url && !file.preview) {
  62.       file.preview = await getBase64(file.originFileObj);
  63.     }
  65.     this.setState({
  66.       previewImage: file.url || file.preview,
  67.       previewVisible: true,
  68.       previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
  69.     });
  70.   };
  72.   handleChange = ({ fileList }) => this.setState({ fileList });
  74.   render() {
  75.     const { previewVisible, previewImage, fileList, previewTitle } = this.state;
  76.     const uploadButton = (
  77.       <div>
  78.         <PlusOutlined />
  79.         <div style={{ marginTop: 8 }}>Upload</div>
  80.       </div>
  81.     );
  82.     return (
  83.       <>
  84.         <Upload
  85.           action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  86.           listType="picture-card"
  87.           fileList={fileList}
  88.           onPreview={this.handlePreview}
  89.           onChange={this.handleChange}
  90.         >
  91.           {fileList.length >= 8 ? null : uploadButton}
  92.         </Upload>
  93.         <Modal
  94.           visible={previewVisible}
  95.           title={previewTitle}
  96.           footer={null}
  97.           onCancel={this.handleCancel}
  98.         >
  99.           <img alt="example" style={{ width: '100%' }} src={previewImage} />
  100.         </Modal>
  101.       </>
  102.     );
  103.   }
  104. }
  106. ReactDOM.render(<PicturesWall />, mountNode);

Upload上传 - 图12

拖拽上传

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

设置 multiple 后，在 IE10+ 可以一次上传多个文件。

  1. import { Upload, message } from 'antd';
  2. import { InboxOutlined } from '@ant-design/icons';
  4. const { Dragger } = Upload;
  6. const props = {
  7.   name: 'file',
  8.   multiple: true,
  9.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  10.   onChange(info) {
  11.     const { status } = info.file;
  12.     if (status !== 'uploading') {
  13.       console.log(info.file, info.fileList);
  14.     }
  15.     if (status === 'done') {
  16.       message.success(`${info.file.name} file uploaded successfully.`);
  17.     } else if (status === 'error') {
  18.       message.error(`${info.file.name} file upload failed.`);
  19.     }
  20.   },
  21. };
  23. ReactDOM.render(
  24.   <Dragger {...props}>
  25.     <p className="ant-upload-drag-icon">
  26.       <InboxOutlined />
  27.     </p>
  28.     <p className="ant-upload-text">Click or drag file to this area to upload</p>
  29.     <p className="ant-upload-hint">
  30.       Support for a single or bulk upload. Strictly prohibit from uploading company data or other
  31.       band files
  32.     </p>
  33.   </Dragger>,
  34.   mountNode,
  35. );

Upload上传 - 图13

手动上传

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

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

Upload上传 - 图14

图片列表样式

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

  1. import { Upload, Button } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  4. const fileList = [
  5.   {
  6.     uid: '-1',
  7.     name: 'xxx.png',
  8.     status: 'done',
  9.     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  10.     thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  11.   },
  12.   {
  13.     uid: '-2',
  14.     name: 'yyy.png',
  15.     status: 'error',
  16.   },
  17. ];
  19. ReactDOM.render(
  20.   <>
  21.     <Upload
  22.       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  23.       listType="picture"
  24.       defaultFileList={[...fileList]}
  25.     >
  26.       <Button icon={<UploadOutlined />}>Upload</Button>
  27.     </Upload>
  28.     <br />
  29.     <br />
  30.     <Upload
  31.       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  32.       listType="picture"
  33.       defaultFileList={[...fileList]}
  34.       className="upload-list-inline"
  35.     >
  36.       <Button icon={<UploadOutlined />}>Upload</Button>
  37.     </Upload>
  38.   </>,
  39.   mountNode,
  40. );
  1. /* tile uploaded pictures */
  2. .upload-list-inline .ant-upload-list-item {
  3.   float: left;
  4.   width: 200px;
  5.   margin-right: 8px;
  6. }
  8. .upload-list-inline [class*='-upload-list-rtl'] .ant-upload-list-item {
  9.   float: right;
  10. }

Upload上传 - 图15

上传前转换文件

使用 beforeUpload 转换上传的文件（例如添加水印）。

  1. import { Upload, Button } from 'antd';
  2. import { UploadOutlined } from '@ant-design/icons';
  4. const props = {
  5.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  6.   listType: 'picture',
  7.   beforeUpload(file) {
  8.     return new Promise(resolve => {
  9.       const reader = new FileReader();
  10.       reader.readAsDataURL(file);
  11.       reader.onload = () => {
  12.         const img = document.createElement('img');
  13.         img.src = reader.result;
  14.         img.onload = () => {
  15.           const canvas = document.createElement('canvas');
  16.           canvas.width = img.naturalWidth;
  17.           canvas.height = img.naturalHeight;
  18.           const ctx = canvas.getContext('2d');
  19.           ctx.drawImage(img, 0, 0);
  20.           ctx.fillStyle = 'red';
  21.           ctx.textBaseline = 'middle';
  22.           ctx.font = '33px Arial';
  23.           ctx.fillText('Ant Design', 20, 20);
  24.           canvas.toBlob(resolve);
  25.         };
  26.       };
  27.     });
  28.   },
  29. };
  31. ReactDOM.render(
  32.   <>
  33.     <Upload {...props}>
  34.       <Button icon={<UploadOutlined />}>Upload</Button>
  35.     </Upload>
  36.   </>,
  37.   mountNode,
  38. );

Upload上传 - 图16

自定义交互图标

使用 showUploadList 设置列表交互图标。

  1. import { Upload, Button } from 'antd';
  2. import { UploadOutlined, StarOutlined } from '@ant-design/icons';
  4. const props = {
  5.   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  6.   onChange({ file, fileList }) {
  7.     if (file.status !== 'uploading') {
  8.       console.log(file, fileList);
  9.     }
  10.   },
  11.   defaultFileList: [
  12.     {
  13.       uid: '1',
  14.       name: 'xxx.png',
  15.       status: 'done',
  16.       response: 'Server Error 500', // custom error message to show
  17.       url: 'http://www.baidu.com/xxx.png',
  18.     },
  19.     {
  20.       uid: '2',
  21.       name: 'yyy.png',
  22.       status: 'done',
  23.       url: 'http://www.baidu.com/yyy.png',
  24.     },
  25.     {
  26.       uid: '3',
  27.       name: 'zzz.png',
  28.       status: 'error',
  29.       response: 'Server Error 500', // custom error message to show
  30.       url: 'http://www.baidu.com/zzz.png',
  31.     },
  32.   ],
  33.   showUploadList: {
  34.     showDownloadIcon: true,
  35.     downloadIcon: 'download ',
  36.     showRemoveIcon: true,
  37.     removeIcon: <StarOutlined onClick={e => console.log(e, 'custom removeIcon event')} />,
  38.   },
  39. };
  41. ReactDOM.render(
  42.   <Upload {...props}>
  43.     <Button icon={<UploadOutlined />}>Upload</Button>
  44.   </Upload>,
  45.   mountNode,
  46. );

Upload上传 - 图17

上传前裁切图片

配合 antd-img-crop 实现上传前裁切图片。

  1. import React, { useState } from 'react';
  2. import { Upload } from 'antd';
  3. import ImgCrop from 'antd-img-crop';
  5. const Demo = () => {
  6.   const [fileList, setFileList] = useState([
  7.     {
  8.       uid: '-1',
  9.       name: 'image.png',
  10.       status: 'done',
  11.       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  12.     },
  13.   ]);
  15.   const onChange = ({ fileList: newFileList }) => {
  16.     setFileList(newFileList);
  17.   };
  19.   const onPreview = async file => {
  20.     let src = file.url;
  21.     if (!src) {
  22.       src = await new Promise(resolve => {
  23.         const reader = new FileReader();
  24.         reader.readAsDataURL(file.originFileObj);
  25.         reader.onload = () => resolve(reader.result);
  26.       });
  27.     }
  28.     const image = new Image();
  29.     image.src = src;
  30.     const imgWindow = window.open(src);
  31.     imgWindow.document.write(image.outerHTML);
  32.   };
  34.   return (
  35.     <ImgCrop rotate>
  36.       <Upload
  37.         action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  38.         listType="picture-card"
  39.         fileList={fileList}
  40.         onChange={onChange}
  41.         onPreview={onPreview}
  42.       >
  43.         {fileList.length < 5 && '+ Upload'}
  44.       </Upload>
  45.     </ImgCrop>
  46.   );
  47. };
  49. ReactDOM.render(<Demo />, mountNode);

API

参数说明类型默认值版本
accept接受上传的文件类型, 详见 input accept Attributestring-
action上传的地址string | (file) => Promise<string>-
beforeUpload上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。注意：IE9 不支持该方法(file, fileList) => boolean | Promise<File>-
customRequest通过覆盖默认的上传行为，可以自定义自己的上传实现function-
data上传所需额外参数或返回上传额外参数的方法object|(file) => object | Promise<object>-
defaultFileList默认已经上传的文件列表object[]-
directory支持上传文件夹（caniuse）booleanfalse
disabled是否禁用booleanfalse
fileList已经上传的文件列表（受控），使用此参数时，如果遇到 onChange 只调用一次的问题，请参考 #2423object[]-
headers设置上传的请求头部，IE10 以上有效object-
iconRender自定义显示 icon(file: UploadFile, listType?: UploadListType) => ReactNode-
isImageUrl自定义缩略图是否使用 <img /> 标签进行显示(file: UploadFile) => boolean(内部实现)
itemRender自定义上传列表项(originNode: ReactElement, file: UploadFile, fileList?: object[]) => React.ReactNode-4.7.0
listType上传列表的内建样式，支持三种基本样式 text, picture 和 picture-cardstringtext
method上传请求的 http methodstringpost
multiple是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件booleanfalse
name发到后台的文件参数名stringfile
openFileDialogOnClick点击打开文件对话框booleantrue
previewFile自定义文件预览逻辑(file: File | Blob) => Promise<dataURL: string>-
progress自定义进度条样式ProgressProps（仅支持 type=”line”）{ strokeWidth: 2, showInfo: false }4.3.0
showUploadList是否展示文件列表, 可设为一个对象，用于单独设定 showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon 和 downloadIconboolean | { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode | (file: UploadFile) => ReactNode, downloadIcon?: ReactNode | (file: UploadFile) => ReactNode }truefunction: 4.7.0
withCredentials上传请求时是否携带 cookiebooleanfalse
onChange上传文件改变时的状态，详见 onChangefunction-
onDownload点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页function(file): void(跳转新标签页)
onPreview点击文件链接或预览图标时的回调function(file)-
onRemove  点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除              function(file): boolean | Promise-  

onChange

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

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

  1. {
  2.   file: { /* ... */ },
  3.   fileList: [ /* ... */ ],
  4.   event: { /* ... */ },
  5. }

  1. file 当前操作的文件对象。

    1. {
    2.    uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
    3.    name: 'xx.png'   // 文件名
    4.    status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
    5.    response: '{"status": "success"}', // 服务端响应内容
    6.    linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    7. }

  2. fileList 当前的文件列表。

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

FAQ

服务端如何实现？

如何显示下载链接？

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

customRequest 怎么使用？

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