Upload 上传

Upload 上传

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

何时使用

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

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

代码演示

基本使用

文件上传。

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: true,
  showUploadList: false,
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  document.getElementById('container'),
);

点击按钮上传

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  document.getElementById('container'),
);

追加上传文件列表

以追加形式上传文件列表

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from 'choerodon-ui/pro';
class App extends React.Component {
  render() {
    const props = {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      multiple: true,
      accept: ['.deb', '.txt', '.pdf', 'image/*'],
      uploadImmediately: false,
      withCredentials: false,
      partialUpload: true,
      appendUpload: true,
    };
    return <Upload {...props} />;
  }
}
ReactDOM.render(<App />, document.getElementById('container'));

上传文件列表控制

使用 beforeUpload 返回 false 后，控制上传文件列表


import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, message } from 'choerodon-ui/pro';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      uploadFileList: [
        {
          name: 'xxx.jpg',
          type: 'image/jpg',
          status: 'success',
          size: 2800,
          uid: 1,
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
    };
  }
  handleBefore = (file, fileList) => {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    if (isJPG && isLt2M) {
      this.setState({
        uploadFileList: [...this.state.uploadFileList, file],
      });

数量限制

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


import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, message } from 'choerodon-ui/pro';
const handleBefore = (file, fileList) => {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJPG && isLt2M;
};
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
  fileListMaxLength: 2,
  beforeUpload: handleBefore,
};

附加提示信息

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  multiple: true,
  accept: ['image/*'],
  uploadImmediately: false,
  extra: <p>请上传图片文件(jpg, jpeg, png...)</p>,
  onUploadSuccess: (response) => console.log(response),
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  document.getElementById('container'),
);

自定义响应处理方法

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, message } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  multiple: true,
  accept: ['.deb', '.txt', '.pdf', 'image/*'],
  uploadImmediately: false,
  onUploadSuccess: (response) => message.success(response.message),
  onUploadError: (error, response, file) => console.log(error, response, file),
};
ReactDOM.render(
  <div>
    <Upload {...props} />
  </div>,
  document.getElementById('container'),
);

附加额外数据

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  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>,
  document.getElementById('container'),
);

文件删除回调

使用 onRemoveFile 返回 false 后，不移除

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from 'choerodon-ui/pro';
class App extends React.Component {
  handleRemove = (file) => {
    console.log('remove', file);
    return false;
  };
  render() {
    const props = {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      multiple: true,
      accept: ['.deb', '.txt', '.pdf', 'image/*'],
      uploadImmediately: false,
      onRemoveFile: this.handleRemove,
    };
    return <Upload {...props} />;
  }
}
ReactDOM.render(<App />, document.getElementById('container'));

上传方法

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


import React from 'react';
import ReactDOM from 'react-dom';
import { Upload, Button, Form, Output } from 'choerodon-ui/pro';
const props = {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  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"

API

Upload 属性说明如下：

属性	说明	类型	默认值
accept	接受上传的文件类型 input accept Attribute	string
action	上传的地址	string	‘’
data	上传所需参数或返回上传参数的方法	object \| function(file)
headers	设置上传的请求头部，IE10 以上有效	object
multiple	是否支持多选，IE10 以上有效	boolean	false
name	`<input>`元素的 name 字段	string	file
uploadImmediately	是否选择文件后立即上传（若为否，组件自身会提供上传按钮）	boolean	true
fileListMaxLength	同时上传文件的最大数量	number	`0`，表示无限制
defaultFileList	默认显示的文件列表	object[]
uploadFileList	显示设定的文件列表（可控）	object[]
withCredentials	上传请求时是否携带 cookie	boolean	false
appendUpload	是否以追加形式添加文件至列表中	boolean	false
partialUpload	只上传文件状态不是`success`的文件	boolean	true
beforeUpload	上传文件之前的钩子，参数为上传的文件，可对文件在上传之前进行校验操作若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。	`(file, fileList) => boolean \| Promise`
showPreviewImage	是否显示图片预览	boolean	true
showUploadBtn	是否显示上传按钮	boolean	true
showUploadList	是否显示上传列表	boolean	true
previewImageWidth	预览图片 Img 元素的宽度	number	100
onFileChange	input 元素内部文件变化的回调	(fileList: UploadFile[]) => void
onRemoveFile	点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。	function(file): boolean	Promise
onUploadProgress	上传进度变化的回调	(percent: number, file: UploadFile) => void
onUploadSuccess	上传成功的回调	(response: any, file: UploadFile) => void
onUploadError	上传出错的回调	(error: Error, response: any, file: UploadFile) => void

更多属性请参考 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;
}

Upload上传