mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
Fix multiple upload
This commit is contained in:
parent
1056af34a7
commit
f229f86a75
@ -14,6 +14,7 @@
|
|||||||
* 新增 `fileList` 和 `defaultFileList` 属性,以满足更多的自定义功能,具体见演示。
|
* 新增 `fileList` 和 `defaultFileList` 属性,以满足更多的自定义功能,具体见演示。
|
||||||
* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
|
* 设置 fileList 数组项的 url 属性可以作为链接展示在文件列表中方便下载。
|
||||||
* 移除内建的上传成功或失败的信息提示,业务可自行实现。
|
* 移除内建的上传成功或失败的信息提示,业务可自行实现。
|
||||||
|
* 修正多文件选择上传时文件列表只展示一个文件的问题。
|
||||||
|
|
||||||
### Table
|
### Table
|
||||||
|
|
||||||
|
31
components/upload/demo/multiple.md
Normal file
31
components/upload/demo/multiple.md
Normal file
@ -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(
|
||||||
|
<Upload {...props}>
|
||||||
|
<button type="button" className="ant-btn ant-btn-ghost">
|
||||||
|
<i className="anticon anticon-upload"></i> 点击上传
|
||||||
|
</button>
|
||||||
|
</Upload>
|
||||||
|
, document.getElementById('components-upload-demo-multiple'));
|
||||||
|
````
|
||||||
|
|
@ -15,12 +15,10 @@ const AntUpload = React.createClass({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
onStart(file) {
|
onStart(file) {
|
||||||
let nextFileList = this.state.fileList.concat();
|
|
||||||
file.status = 'uploading';
|
file.status = 'uploading';
|
||||||
nextFileList.push(file);
|
|
||||||
this.onChange({
|
this.onChange({
|
||||||
file: file,
|
file: file,
|
||||||
fileList: nextFileList
|
add: true
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
removeFile(file) {
|
removeFile(file) {
|
||||||
@ -76,9 +74,18 @@ const AntUpload = React.createClass({
|
|||||||
// 1. 有设置外部属性时不改变 fileList
|
// 1. 有设置外部属性时不改变 fileList
|
||||||
// 2. 上传中状态(info.event)不改变 fileList
|
// 2. 上传中状态(info.event)不改变 fileList
|
||||||
if (!('fileList' in this.props) && !info.event) {
|
if (!('fileList' in this.props) && !info.event) {
|
||||||
this.setState({
|
// 新增文件时,使用 multiple 属性会造成同时 setState
|
||||||
fileList: info.fileList
|
if (info.add) {
|
||||||
});
|
this.setState((prevState) => {
|
||||||
|
return {
|
||||||
|
fileList: prevState.fileList.concat(info.file)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
fileList: info.fileList
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.props.onChange(info);
|
this.props.onChange(info);
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user