diff --git a/docs/upload/index.en-us.md b/docs/upload/index.en-us.md index 4f2314af6f..1d3e4a76ba 100644 --- a/docs/upload/index.en-us.md +++ b/docs/upload/index.en-us.md @@ -47,7 +47,8 @@ When user want to upload some file to server side or cloud storage, upload compo | autoUpload | auto upload after select file | Boolean | true | | afterSelect | callback after select file, afterSelect only works when autoUpload=false; when autoUpload=true, use beforeUpload to replace it

**signaure**:
Function(file: Object) => Boolean
**params**:
_file_: {Object} null
**return**:
{Boolean} return false will prevent upload file
return false will prevent upload
| Function | func.noop | | request | custom reuqest method

**signaure**:
Function(option: Object) => Object
**params**:
_option_: {Object} null
**returns**:
{Object} object with abort method
| Function | - | - +| progressProps | Progress props | Object | - | +| ### Upload.Card > Inherit from Upload API diff --git a/docs/upload/index.md b/docs/upload/index.md index 7da8583ebc..c0cb828c5e 100644 --- a/docs/upload/index.md +++ b/docs/upload/index.md @@ -18,39 +18,40 @@ ### Upload -| 参数 | 说明 | 类型 | 默认值 | -| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------- | -| listType | 上传列表的样式

**可选值**:
'text'(文字)
'image'(图文)
'card'(卡片) | Enum | - | -| shape | 上传按钮形状

**可选值**:
'card' | Enum | - | -| value | 文件列表 | Array | - | -| onRemove | 移除文件回调函数

**签名**:
Function(file: Object) => Boolean/Promise
**参数**:
_file_: {Object} 文件
**返回值**:
{Boolean/Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除
| Function | func.noop | -| onCancel | 取消上传回调(支持Promise)

**签名**:
Function() => void | Function | func.noop | -| onImageError | 头像加载出错回调

**签名**:
Function() => void | Function | func.noop | -| onPreview | listType=card时点击图片回调

**签名**:
Function() => void | Function | func.noop | -| extraRender | 自定义额外渲染

**签名**:
Function() => void | Function | func.noop | -| children | 子元素 | ReactNode | - | -| action | 上传的地址 | String | - | -| accept | 接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept) | String | - | -| data | 上传额外传参 | Object/Function | - | -| headers | 设置上传的请求头部 | Object | - | -| withCredentials | 是否允许请求携带 cookie | Boolean | true | -| beforeUpload | 可选参数, 详见 [beforeUpload](#beforeUpload)

**签名**:
Function(file: Object, options: Object) => Boolean/Object/Promise
**参数**:
_file_: {Object} null
_options_: {Object} null
**返回值**:
{Boolean/Object/Promise} 返回值作用见demo
| Function | func.noop | -| onProgress | 上传中

**签名**:
Function() => void | Function | func.noop | -| onSuccess | 可选参数，上传成功回调函数，参数为请求下响应信息以及文件

**签名**:
Function(file: Object, value: Array) => void
**参数**:
_file_: {Object} 文件
_value_: {Array} 值 | Function | func.noop | -| onError | 可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件

**签名**:
Function(file: Object, value: Array) => void
**参数**:
_file_: {Object} 出错的文件
_value_: {Array} 当前值 | Function | func.noop | -| timeout | 设置上传超时,单位ms | Number | - | -| method | 上传方法

**可选值**:
'post', 'put' | Enum | 'post' | -| request | 自定义上传方法

**签名**:
Function(option: Object) => Object
**参数**:
_option_: {Object} null
**返回值**:
{Object} object with abort method
| Function | - | -| onSelect | 选择文件回调

**签名**:
Function() => void | Function | func.noop | -| onDrop | 放文件

**签名**:
Function() => void | Function | func.noop | -| defaultValue | 默认文件列表 | Array | - | -| formatter | 数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)

**签名**:
Function(response: Object, file: File) => void
**参数**:
_response_: {Object} 返回
_file_: {File} 文件对象 | Function | - | -| limit | 最大文件上传个数 | Number | Infinity | -| dragable | 可选参数，是否支持拖拽上传，`ie10+` 支持。 | Boolean | - | -| disabled | 可选参数，是否禁用上传功能 | Boolean | - | -| onChange | 上传文件改变时的状态

**签名**:
Function(info: Object) => void
**参数**:
_info_: {Object} 文件事件对象 | Function | func.noop | -| afterSelect | 可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.

**签名**:
Function(file: Object) => Boolean
**参数**:
_file_: {Object} null
**返回值**:
{Boolean} 返回false会阻止上传,其他则表示正常
| Function | func.noop | -| autoUpload | 自动上传 | Boolean | true | +| 参数 | 说明 | 类型 | 默认值 | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------- | +| listType | 上传列表的样式

**可选值**:
'text'(文字)
'image'(图文)
'card'(卡片) | Enum | - | +| shape | 上传按钮形状

**可选值**:
'card' | Enum | - | +| value | 文件列表 | Array | - | +| onRemove | 移除文件回调函数

**签名**:
Function(file: Object) => Boolean/Promise
**参数**:
_file_: {Object} 文件
**返回值**:
{Boolean/Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除
| Function | func.noop | +| onCancel | 取消上传回调(支持Promise)

**签名**:
Function() => void | Function | func.noop | +| onImageError | 头像加载出错回调

**签名**:
Function() => void | Function | func.noop | +| onPreview | listType=card时点击图片回调

**签名**:
Function() => void | Function | func.noop | +| extraRender | 自定义额外渲染

**签名**:
Function() => void | Function | func.noop | +| progressProps | 透传给Progress props | Object | - | +| children | 子元素 | ReactNode | - | +| action | 上传的地址 | String | - | +| accept | 接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept) | String | - | +| data | 上传额外传参 | Object/Function | - | +| headers | 设置上传的请求头部 | Object | - | +| withCredentials | 是否允许请求携带 cookie | Boolean | true | +| beforeUpload | 可选参数, 详见 [beforeUpload](#beforeUpload)

**签名**:
Function(file: Object, options: Object) => Boolean/Object/Promise
**参数**:
_file_: {Object} 所有文件
_options_: {Object} 参数
**返回值**:
{Boolean/Object/Promise} 返回值作用见demo
| Function | func.noop | +| onProgress | 上传中

**签名**:
Function() => void | Function | func.noop | +| onSuccess | 可选参数，上传成功回调函数，参数为请求下响应信息以及文件

**签名**:
Function(file: Object, value: Array) => void
**参数**:
_file_: {Object} 文件
_value_: {Array} 值 | Function | func.noop | +| onError | 可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件

**签名**:
Function(file: Object, value: Array) => void
**参数**:
_file_: {Object} 出错的文件
_value_: {Array} 当前值 | Function | func.noop | +| timeout | 设置上传超时,单位ms | Number | - | +| method | 上传方法

**可选值**:
'post', 'put' | Enum | 'post' | +| request | 自定义上传方法

**签名**:
Function(option: Object) => Object
**参数**:
_option_: {Object} null
**返回值**:
{Object} object with abort method
| Function | - | +| onSelect | 选择文件回调

**签名**:
Function() => void | Function | func.noop | +| onDrop | 放文件

**签名**:
Function() => void | Function | func.noop | +| defaultValue | 默认文件列表 | Array | - | +| formatter | 数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)

**签名**:
Function(response: Object, file: File) => void
**参数**:
_response_: {Object} 返回
_file_: {File} 文件对象 | Function | - | +| limit | 最大文件上传个数 | Number | Infinity | +| dragable | 可选参数，是否支持拖拽上传，`ie10+` 支持。 | Boolean | - | +| disabled | 可选参数，是否禁用上传功能 | Boolean | - | +| onChange | 上传文件改变时的状态

**签名**:
Function(info: Object) => void
**参数**:
_info_: {Object} 文件事件对象 | Function | func.noop | +| afterSelect | 可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.

**签名**:
Function(file: Object) => Boolean
**参数**:
_file_: {Object} null
**返回值**:
{Boolean} 返回false会阻止上传,其他则表示正常
| Function | func.noop | +| autoUpload | 自动上传 | Boolean | true | ### Upload.Card @@ -104,31 +105,31 @@ ### 自定义Request 某些场景下需要自定义Request,例如对接AWS S3 jd-sdk or aliyun oss sdk,. Upload 支持 传入自定义的 request方法. -``` - function customRequest(option) { - /* coding here */ - return {abort() {/* coding here */}}; - } - -``` + function customRequest(option) { + /* coding here */ + return {abort() {/* coding here */}}; + } + + + customRequest被传入一个 object,包含以下属性: -- onProgress: (event: { percent: number }): void -- onError: (event: Error, body?: Object): void -- onSuccess: (body: Object): void -- data: Object // 额外的数据 -- filename: String // 文件名 -- file: File // 原生File对象 -- withCredentials: Boolean // 是否携带cookie -- action: String // 请求地址 -- method: String // 请求类型 post/put -- timeout: Number // 超时 -- headers: Object // 请求头 +- onProgress: (event: { percent: number }): void +- onError: (event: Error, body?: Object): void +- onSuccess: (body: Object): void +- data: Object // 额外的数据 +- filename: String // 文件名 +- file: File // 原生File对象 +- withCredentials: Boolean // 是否携带cookie +- action: String // 请求地址 +- method: String // 请求类型 post/put +- timeout: Number // 超时 +- headers: Object // 请求头 request需要返回一个包含abort方法的对象,用于中断上传 -- abort(file?: File) => void: abort the uploading file +- abort(file?: File) => void: abort the uploading file 具体实现参照 Upload 默认request方法: diff --git a/src/upload/list.jsx b/src/upload/list.jsx index 933a71c623..22798b99c8 100644 --- a/src/upload/list.jsx +++ b/src/upload/list.jsx @@ -45,6 +45,10 @@ class List extends Component { * 自定义额外渲染 */ extraRender: PropTypes.func, + /** + * 透传给Progress props + */ + progressProps: PropTypes.object, children: PropTypes.node, uploader: PropTypes.any, useDataURL: PropTypes.bool, @@ -61,6 +65,7 @@ class List extends Component { extraRender: func.noop, onImageError: func.noop, onPreview: func.noop, + progressProps: {}, }; componentDidUpdate() { @@ -146,7 +151,7 @@ class List extends Component { return `${fileSize}${suffix}`; } getTextList(file) { - const { extraRender } = this.props; + const { extraRender, progressProps } = this.props; const { prefixCls, downloadURL, size, itemCls } = this.getInfo(file); const onClick = () => file.state === 'uploading' ? this.handleCancel(file) : this.handleClose(file); @@ -167,7 +172,7 @@ class List extends Component { {file.state === 'uploading' ?
- +
: null} {file.state === 'error' && file.errorMsg ?
@@ -186,7 +191,7 @@ class List extends Component { } getImageList(file) { - const { extraRender } = this.props; + const { extraRender, progressProps } = this.props; const { prefixCls, downloadURL, imgURL, size, itemCls, alt } = this.getInfo(file); @@ -219,7 +224,7 @@ class List extends Component { {extraRender(file)} {file.state === 'uploading' ?
- +
: null} {file.state === 'error' && file.errorMsg ?
{file.errorMsg} @@ -229,7 +234,7 @@ class List extends Component { } getPictureCardList(file) { - const { locale } = this.props; + const { locale, progressProps } = this.props; const { prefixCls, downloadURL, imgURL, itemCls, alt } = this.getInfo(file); @@ -268,7 +273,7 @@ class List extends Component {
{file.state === 'uploading' ?
- +
: null } {file.state !== 'uploading' ? ( diff --git a/src/upload/upload.jsx b/src/upload/upload.jsx index 9f1d8d34b9..1549451305 100644 --- a/src/upload/upload.jsx +++ b/src/upload/upload.jsx @@ -144,6 +144,10 @@ class Upload extends Base { * @return {Object} object with abort method */ request: PropTypes.func, + /** + * 透传给Progress props + */ + progressProps: PropTypes.object, }; static defaultProps = { @@ -441,6 +445,7 @@ class Upload extends Base { onPreview, list, extraRender, + progressProps, ...others} = this.props; const cls = classNames({ @@ -492,7 +497,7 @@ class Upload extends Base { {listType || list ? : null}