Upload 上传

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

何时使用

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

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

代码演示

点击上传

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

Upload上传 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, message, Button, Icon } from 'choerodon-ui';
  4. const props = {
  5. name: 'file',
  6. action: '//jsonplaceholder.typicode.com/posts/',
  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. };
  21. ReactDOM.render(
  22. <Upload {...props}>
  23. <Button>
  24. <Icon type="file_upload" /> Click to Upload
  25. </Button>
  26. </Upload>,
  27. document.getElementById('container'),

用户头像

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

beforeUpload 的返回值可以是一个 Promise 以支持也支持异步检查:示例

Upload上传 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Icon, message } from 'choerodon-ui';
  4. function getBase64(img, callback) {
  5. const reader = new FileReader();
  6. reader.addEventListener('load', () => callback(reader.result));
  7. reader.readAsDataURL(img);
  8. }
  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. }
  20. class Avatar extends React.Component {
  21. state = {
  22. loading: false,
  23. };
  24. handleChange = (info) => {
  25. if (info.file.status === 'uploading') {
  26. this.setState({ loading: true });
  27. return;
  28. }
  29. if (info.file.status === 'done') {
  30. // Get this url from response in real world.

已上传的文件列表

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

Upload上传 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Button, Icon } from 'choerodon-ui';
  4. const props = {
  5. action: '//jsonplaceholder.typicode.com/posts/',
  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. reponse: '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. reponse: 'Server Error 500', // custom error message to show
  30. url: 'http://www.baidu.com/zzz.png',
  31. },
  32. ],

照片墙

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

Upload上传 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Icon, Modal } from 'choerodon-ui';
  4. class PicturesWall extends React.Component {
  5. state = {
  6. previewVisible: false,
  7. previewImage: '',
  8. fileList: [
  9. {
  10. uid: -1,
  11. name: 'xxx.png',
  12. status: 'done',
  13. url:
  14. 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  15. },
  16. ],
  17. };
  18. handleCancel = () => this.setState({ previewVisible: false });
  19. handlePreview = (file) => {
  20. this.setState({
  21. previewImage: file.url || file.thumbUrl,
  22. previewVisible: true,
  23. });
  24. };
  25. handleChange = ({ fileList }) => this.setState({ fileList });
  26. render() {
  27. const { previewVisible, previewImage, fileList } = this.state;
  28. const uploadButton = (

完全控制的上传列表

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

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

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

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

Upload上传 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Button, Icon } from 'choerodon-ui';
  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. };
  15. handleChange = (info) => {
  16. let fileList = info.fileList;
  17. // 1. Limit the number of uploaded files
  18. // Only to show two recent uploaded files, and old ones will be replaced by the new
  19. fileList = fileList.slice(-2);
  20. // 2. read from response and show file link
  21. fileList = fileList.map((file) => {
  22. if (file.response) {
  23. // Component will show file.url as link
  24. file.url = file.response.url;
  25. }
  26. return file;

拖拽上传

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

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

Upload上传 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Icon, message } from 'choerodon-ui';
  4. const Dragger = Upload.Dragger;
  5. const props = {
  6. name: 'file',
  7. multiple: true,
  8. action: '//jsonplaceholder.typicode.com/posts/',
  9. onChange(info) {
  10. const status = info.file.status;
  11. if (status !== 'uploading') {
  12. console.log(info.file, info.fileList);
  13. }
  14. if (status === 'done') {
  15. message.success(`${info.file.name} file uploaded successfully.`);
  16. } else if (status === 'error') {
  17. message.error(`${info.file.name} file upload failed.`);
  18. }
  19. },
  20. };
  21. ReactDOM.render(
  22. <Dragger {...props}>
  23. <p className="c7n-upload-drag-icon">
  24. <Icon type="inbox" />
  25. </p>
  26. <p className="c7n-upload-text">Click or drag file to this area to upload</p>
  27. <p className="c7n-upload-hint">
  28. Support for a single or bulk upload. Strictly prohibit from uploading
  29. company data or other band files
  30. </p>
  31. </Dragger>,
  32. document.getElementById('container'),

图片列表样式

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

Upload上传 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Button, Icon } from 'choerodon-ui';
  4. const fileList = [
  5. {
  6. uid: -1,
  7. name: 'xxx.png',
  8. status: 'done',
  9. url:
  10. 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  11. thumbUrl:
  12. 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  13. },
  14. {
  15. uid: -2,
  16. name: 'yyy.png',
  17. status: 'done',
  18. url:
  19. 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  20. thumbUrl:
  21. 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  22. },
  23. ];
  24. const props = {
  25. action: '//jsonplaceholder.typicode.com/posts/',
  26. listType: 'picture',
  27. defaultFileList: [...fileList],
  28. };
  29. const props2 = {
  30. action: '//jsonplaceholder.typicode.com/posts/',
  31. listType: 'picture',
  32. defaultFileList: [...fileList],
  33. className: 'upload-list-inline',
  34. };
  35. ReactDOM.render(
  36. <div>
  37. <Upload {...props}>
  38. <Button>
  39. <Icon type="file_upload" /> upload

手动上传

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

Upload上传 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Button, Icon, message } from 'choerodon-ui';
  4. import reqwest from 'reqwest';
  5. class Demo extends React.Component {
  6. state = {
  7. fileList: [],
  8. uploading: false,
  9. };
  10. handleUpload = () => {
  11. const { fileList } = this.state;
  12. const formData = new FormData();
  13. fileList.forEach((file) => {
  14. formData.append('files[]', file);
  15. });
  16. this.setState({
  17. uploading: true,
  18. });
  19. // You can use any AJAX library you like
  20. reqwest({
  21. url: '//jsonplaceholder.typicode.com/posts/',
  22. method: 'post',
  23. processData: false,
  24. data: formData,
  25. success: () => {
  26. this.setState({
  27. fileList: [],

可拖拽照片墙

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

Upload上传 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Upload, Icon, Modal } from 'choerodon-ui';
  4. class PicturesWall extends React.Component {
  5. state = {
  6. previewVisible: false,
  7. previewImage: '',
  8. fileList: [{
  9. uid: -1,
  10. name: 'xxx.png',
  11. status: 'done',
  12. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  13. },{
  14. uid: -2,
  15. name: 'xxx.png',
  16. status: 'done',
  17. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  18. },{
  19. uid: -3,
  20. name: 'xxx.png',
  21. status: 'done',
  22. url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  23. }, {
  24. uid: -4,
  25. name: 'test.jpg',
  26. status: 'done',
  27. url: 'https://s1.ax1x.com/2020/07/05/Up8j76.jpg',
  28. }],
  29. };
  30. handleCancel = () => this.setState({ previewVisible: false });

API

服务端上传接口实现可以参考 jQuery-File-Upload

参数说明类型默认值
accept接受上传的文件类型, 详见 input accept Attributestring
action必选参数, 上传的地址string
beforeUpload上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传。注意:IE9 不支持该方法(file, fileList) => boolean | Promise
customRequest通过覆盖默认的上传行为,可以自定义自己的上传实现Function
data上传所需参数或返回上传参数的方法object|function(file)
defaultFileList默认已经上传的文件列表object[]
dragUploadList是否开启拖拽picture-cardbooleanfalse
disabled是否禁用booleanfalse
fileList已经上传的文件列表(受控)object[]
headers设置上传的请求头部,IE10 以上有效object
listType上传列表的内建样式,支持三种基本样式 text, picturepicture-cardstring‘text’
multiple是否支持多选文件,ie10+ 支持。开启后按住 ctrl 可选择多个文件。booleanfalse
name发到后台的文件参数名string‘file’
showUploadList是否展示 uploadList, 可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIconBoolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean }true
supportServerRender服务端渲染时需要打开这个booleanfalse
withCredentials上传请求时是否携带 cookiebooleanfalse
onChange上传文件改变时的状态,详见 onChangeFunction
onPreview点击文件链接或预览图标时的回调Function(file)
onRemove  点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。              Function(file): boolean | Promise无  
onSuccess  上传成功事件  Function(response, file)无  
onProgress  上传进度中事件  Function({ percent }, file)无  
onError  上传失败事件  Function(error, response, file)无  
onDragEnd  拖拽picture-card事件  Function(fileList)无  
requestFileKeys  可以传输文件上面的一些props信息给后台  string,string[]无  

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
    5. response: '{"status": "success"}', // 服务端响应内容
    6. linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    7. }
  2. fileList 当前的文件列表。

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

显示下载链接

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

customRequest

IE note