Upload上传

文件上传

何时使用

需要上传文件时。

代码演示

基本使用

文件上传。

import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: true,
  showUploadList: false,
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  mountNode,
);

点击按钮上传

选择文件后，点击按钮上传。

import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  mountNode
);

数量限制

限制同时上传文件的数量。

import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
  fileListMaxLength: 2,
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  mountNode
);

自定义响应处理方法

可以自定义上传请求得到响应后的处理方式，包括成功和失败。这将覆盖默认的处理行为。

import { Upload, message } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
  onUploadSuccess: response => message.success(response),
  onUploadError: (error, response, file) => console.log(error, response, file),
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  mountNode
);

附加额外数据

为一个文件上传请求追加一个FormData实例。请查看开发者工具中的Network标签。

import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
  data: {
    key1: 'value1',
    key2: 'value2',
  },
  onUploadSuccess: response => console.log(response),
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  mountNode
);

附加提示信息

在组件右上角显示提示信息，如接受的文件类型等。

import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['image/*'],
  uploadImmediately: false,
  extra: <p>请上传图片文件(jpg, jpeg, png...)</p>,
  onUploadSuccess: response => console.log(response),
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  mountNode
);

上传方法

直接调用组件的上传方法，可以使用showUploadBtn={false}使自带的上传按钮消失。

import { Upload, Button, Form, Output } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: '//localhost:3000/upload',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
  showUploadBtn: false,
  showPreviewImage: true,
};
class Demo extends React.Component {
  upload;
  saveUpload = node => (this.upload = node);
  handleBtnClick = () => {
    this.upload.startUpload();
  };
  render() {
    return (
      <Form header="文件管理">
        <Output label="选择Logo" renderer={() => <Upload ref={this.saveUpload} {...props} />} />
        <Button style={{ marginBottom: 10 }} color="primary" onClick={this.handleBtnClick}>
          提交
        </Button>
      </Form>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

API

Upload 属性说明如下：

更多属性请参考 ViewComponent。

UploadFile 类型接口：

export interface UploadFile {
  uid: string;
  size: number;
  name: string;
  filename?: string;
  lastModified?: string;
  lastModifiedDate?: Date;
  url?: string;
  status?: 'error' | 'success' | 'uploading' | 'done';
  percent?: number;
  thumbUrl?: string;
  originFileObj?: File;
  response?: any;
  error?: any;
  linkProps?: any;
  type: string;
  msClose?: boolean;
}