diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a81fcdc6..7caaea819 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * 新增 `fileList` 和 `defaultFileList` 属性,以满足更多的自定义功能,具体见演示。 * 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。 * 移除内建的上传成功或失败的信息提示,业务可自行实现。 +* 修正多文件选择上传时文件列表只展示一个文件的问题。 ### Table diff --git a/components/upload/demo/multiple.md b/components/upload/demo/multiple.md new file mode 100644 index 000000000..1c03d314c --- /dev/null +++ b/components/upload/demo/multiple.md @@ -0,0 +1,31 @@ +# 多文件选择 + +- order: 5 + +按住 ctrl 可选择多个文件,`ie10+` 支持。 + +--- + +````jsx +var Upload = antd.Upload; +var message = antd.message; + +var props = { + action: '/upload.do', + multiple: true, + onChange(info) { + if (info.file.status !== 'uploading') { + console.log(info.file, info.fileList); + } + } +}; + +React.render( + + + +, document.getElementById('components-upload-demo-multiple')); +```` + diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 406863332..c261f0976 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -15,12 +15,10 @@ const AntUpload = React.createClass({ }; }, onStart(file) { - let nextFileList = this.state.fileList.concat(); file.status = 'uploading'; - nextFileList.push(file); this.onChange({ file: file, - fileList: nextFileList + add: true }); }, removeFile(file) { @@ -76,9 +74,18 @@ const AntUpload = React.createClass({ // 1. 有设置外部属性时不改变 fileList // 2. 上传中状态(info.event)不改变 fileList if (!('fileList' in this.props) && !info.event) { - this.setState({ - fileList: info.fileList - }); + // 新增文件时,使用 multiple 属性会造成同时 setState + if (info.add) { + this.setState((prevState) => { + return { + fileList: prevState.fileList.concat(info.file) + }; + }); + } else { + this.setState({ + fileList: info.fileList + }); + } } this.props.onChange(info); },