Upload 文件上传

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

何时使用#

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

  • 当需要上传一个或一些文件时。
  • 当需要展现上传的进度时。
  • 当需要使用拖拽交互时。

API#

参数 说明 类型 默认值
name 可选参数, 上传的文件 String file
action 必选参数, 上传的地址 String 无
data 可选参数, 上传所需参数 Object 无
showUploadList 可选参数, 是否展示 uploadList, 默认开启 Boolean true
multiple 可选参数, 是否支持多选文件，支持 ie10+ Boolean false
accept 可选参数, 接受上传的文件类型, 详见 input accept Attribute String 无
onChange 可选参数, 上传文件改变时的状态，详见 onChange Function 无

onChange#

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

{
  file: { ... },
  fileList: [ ... ],
  event: { ... }
}

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

    {
  uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
  name: 'xx.png'   // 文件名
  status: 'done',  // 状态有：uploading done error removed
  response: '{"status":"success"}'  // 服务端响应内容
}

    如果上传控件是 multiple 时，此参数将为一个对象数组 [file, ...]。

  2. fileList 当前的文件列表。

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

显示下载链接#

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

IE note#

代码演示 

import { Upload, message, Button, Icon } from 'antd';

const props = {
  name: 'file',
  action: '/upload.do',
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(info.file.name + ' 上传成功。');
    } else if (info.file.status === 'error') {
      message.error(info.file.name + ' 上传失败。');
    }
  }
};

ReactDOM.render(
  <Upload {...props}>
    <Button type="ghost">
      <Icon type="upload" /> 点击上传
    </Button>
  </Upload>
, document.getElementById('components-upload-demo-basic'));
点击上传

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

import { Upload, Button, Icon } from 'antd';

const MyUpload = React.createClass({
  getInitialState() {
    return {
      fileList: [{
        uid: -1,
        name: 'xxx.png',
        status: 'done',
        url: 'http://www.baidu.com/xxx.png'
      }]
    };
  },
  handleChange(info) {
    let fileList = info.fileList;

    // 1. 上传列表数量的限制
    //    只显示最近上传的一个，旧的会被新的顶掉
    fileList = fileList.slice(-2);

    // 2. 读取远程路径并显示链接
    fileList = fileList.map(function(file) {
      if (file.response) {
        // 组件会将 file.url 作为链接进行展示
        file.url = JSON.parse(file.response).url;
      }
      return file;
    });

    // 3. 按照服务器返回信息筛选成功上传的文件
    fileList = fileList.filter(function(file) {
      if (file.response) {
        return JSON.parse(file.response).status === 'success';
      }
      return true;
    });

    this.setState({ fileList });
  },
  render() {
    const props = {
      action: '/upload.do',
      onChange: this.handleChange,
      multiple: true
    };
    return <Upload {...props} fileList={this.state.fileList}>
      <Button type="ghost">
        <Icon type="upload" /> 点击上传
      </Button>
    </Upload>;
  }
});

ReactDOM.render(<MyUpload />, document.getElementById('components-upload-demo-filelist'));
完全控制的上传列表

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

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

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

3) 按照服务器返回信息筛选成功上传的文件。

import { Upload, Icon } from 'antd';
const Dragger = Upload.Dragger;

const props = {
  name: 'file',
  showUploadList: false,
  action: '/upload.do'
};

ReactDOM.render(
  <Dragger {...props}>
    <Icon type="plus" />
  </Dragger>,
  document.getElementById('components-upload-demo-drag-simple')
);
#components-upload-demo-drag-simple {
  width: 246px;
  height: 146px;
}
拖拽上传

样式简单一些。

import { Upload, Button, Icon } from 'antd';

const props = {
  action: '/upload.do',
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file);
      console.log(info.fileList);
    }
  },
  defaultFileList: [{
    uid: -1,
    name: 'xxx.png',
    status: 'done',
    url: 'http://www.baidu.com/xxx.png'
  }, {
    uid: -2,
    name: 'yyy.png',
    status: 'done',
    url: 'http://www.baidu.com/yyy.png'
  }]
};

ReactDOM.render(
  <Upload {...props}>
    <Button type="ghost">
      <Icon type="upload" /> 点击上传
    </Button>
  </Upload>
, document.getElementById('components-upload-demo-defaultfilelist'));
传入已上传的文件

对已上传的文件进行编辑。

import { Upload, Icon } from 'antd';
const Dragger = Upload.Dragger;

const props = {
  name: 'file',
  showUploadList: false,
  action: '/upload.do'
};

ReactDOM.render(
  <Dragger {...props}>
    <p className="ant-upload-drag-icon">
      <Icon type="inbox" />
    </p>
    <p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
    <p className="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
  </Dragger>,
  document.getElementById('components-upload-demo-drag')
);
#components-upload-demo-drag {
  height: 180px;
}
拖拽上传

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

import { Upload, message, Button, Icon } from 'antd';

const props = {
  action: '/upload.do',
  multiple: true,
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(info.file.name + ' 上传成功。');
    } else if (info.file.status === 'error') {
      message.error(info.file.name + ' 上传失败。');
    }
  }
};

ReactDOM.render(
  <Upload {...props}>
    <Button type="ghost">
      <Icon type="upload" /> 点击上传
    </Button>
  </Upload>
, document.getElementById('components-upload-demo-multiple'));
多文件选择

按住 ctrl 可选择多个文件，ie10+ 支持。