提交 af30f55e 编写于 作者: Y yiminghe

optimize

上级 5b76d65e
......@@ -35,6 +35,7 @@
| allowClear | 显示清除按钮 | | false |
| placeholder | 选择框默认文字 | string | 无 |
| searchPlaceholder | 搜索框默认文字 | string | 无 |
| optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
| combobox | 输入框自动提示模式 | | false |
| size | 选择框大小 | String | 无 |
......
......@@ -18,12 +18,12 @@ var props = {
}
},
defaultFileList: [{
uid: 12345,
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png'
}, {
uid: 12346,
uid: -2,
name: 'yyy.png',
status: 'done',
url: 'http://www.baidu.com/yyy.png'
......
......@@ -15,7 +15,7 @@
````jsx
var Upload = antd.Upload;
var fileList = [{
uid: 123,
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png'
......@@ -32,7 +32,7 @@ var MyUpload = React.createClass({
// 1. 上传列表数量的限制
// 只显示最近上传的一个,旧的会被新的顶掉
fileList = fileList.slice(-1);
fileList = fileList.slice(-2);
// 2. 读取远程路径并显示链接
fileList = fileList.map(function(file) {
......
......@@ -16,10 +16,10 @@ const AntUpload = React.createClass({
};
},
onStart(file) {
let nextFileList = this.state.fileList;
let nextFileList = this.state.fileList.concat();
file.status = 'uploading';
nextFileList.push(file);
this.props.onChange({
this.onChange({
file: file,
fileList: nextFileList
});
......@@ -31,30 +31,34 @@ const AntUpload = React.createClass({
let index = fileList.indexOf(targetItem);
if (index !== -1) {
fileList.splice(index, 1);
return fileList;
}
return fileList;
return null;
},
onSuccess(response, file) {
let fileList = this.state.fileList.concat();
Message.success(file.name + '上传完成。');
let targetItem = getFileItem(file, fileList);
targetItem.status = 'done';
targetItem.response = response;
// 解析出文件上传后的远程地址
if (typeof this.props.urlResolver === 'function') {
targetItem.url = this.props.urlResolver(response);
// 之前已经删除
if (targetItem) {
targetItem.status = 'done';
targetItem.response = response;
this.onChange({
file: targetItem,
fileList: this.state.fileList
});
}
this.onChange({
file: targetItem,
fileList: this.state.fileList
});
},
onProgress(e, file) {
this.onChange({
event: e,
file: file,
fileList: this.state.fileList
});
let fileList = this.state.fileList;
let targetItem = getFileItem(file, fileList);
if (targetItem) {
this.onChange({
event: e,
file: file,
fileList: this.state.fileList
});
}
},
onError(error, response, file) {
Message.error(file.name + ' 上传失败。');
......@@ -64,10 +68,12 @@ const AntUpload = React.createClass({
},
handleRemove(file) {
let fileList = this.removeFile(file);
this.onChange({
file: file,
fileList: fileList
});
if (fileList) {
this.onChange({
file: file,
fileList: fileList
});
}
},
onChange(info) {
// 1. 有设置外部属性时不改变 fileList
......@@ -88,11 +94,6 @@ const AntUpload = React.createClass({
data: {},
accept: '',
onChange: noop,
urlResolver: function(response) {
try {
return JSON.parse(response).url;
} catch(e) {}
}
};
},
componentWillReceiveProps(nextProps) {
......@@ -129,7 +130,7 @@ const AntUpload = React.createClass({
</Upload>
</div>
<UploadList items={this.state.fileList}
onRemove={this.handleRemove} />
onRemove={this.handleRemove}/>
</div>
);
}
......
......@@ -43,9 +43,9 @@
```js
{
uid: 'uid', // 文件唯一标识
uid: 'uid', // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
name: 'xx.png' // 文件名
status: 'done', // 状态:uploading done removed
status: 'done', // 状态:uploading done
response: '{"status":"success"}' // 服务端响应内容
}
```
......@@ -55,4 +55,4 @@
## 显示下载链接
默认会解析服务器返回数据的 `body.url` 作为下载链接,需要自行配置请使用 fileList 属性进行展示控制。
请使用 fileList 属性设置数组项的 url 属性进行展示控制。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册