diff --git a/components/upload/demo/inplace.md b/components/upload/demo/inplace.md
index 03c79ae477..3b4c0b7ca9 100644
--- a/components/upload/demo/inplace.md
+++ b/components/upload/demo/inplace.md
@@ -24,7 +24,7 @@ const Demo = React.createClass({
if (info.file.status === 'done') {
this.setState({
// Get this url from response in real world.
- imageUrl: 'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
+ imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
});
}
},
@@ -52,21 +52,22 @@ ReactDOM.render(, mountNode);
```
```css
-#components-upload-demo-inplace .avatar-uploader,
-#components-upload-demo-inplace .avatar-uploader-trigger,
-#components-upload-demo-inplace .avatar {
+.avatar-uploader,
+.avatar-uploader-trigger,
+.avatar {
width: 150px;
height: 150px;
}
-#components-upload-demo-inplace .avatar-uploader {
+.avatar-uploader {
display: block;
- border: 1px solid #d9d9d9;
+ border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
-#components-upload-demo-inplace .avatar-uploader-trigger {
+.avatar-uploader-trigger {
display: table-cell;
vertical-align: middle;
font-size: 28px;
+ color: #999;
}
```
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index b9e82dce81..efd2c56d70 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -36,8 +36,8 @@ const ImageUploadList = React.createClass({
uid: -1,
name: 'xxx.png',
status: 'done',
- url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
- thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
onPreview: (file) => {
this.setState({
@@ -52,12 +52,17 @@ const ImageUploadList = React.createClass({
Upload
-
-
+
+
sample
-
+
);
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index 178db4ed8a..b830a6fdd5 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -24,14 +24,14 @@ const props = {
uid: -1,
name: 'xxx.png',
status: 'done',
- url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
- thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}, {
uid: -2,
name: 'yyy.png',
status: 'done',
- url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
- thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
};
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 7e19c730f9..d0c29847a7 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -208,6 +208,8 @@
width: 48px;
height: 48px;
display: block;
+ overflow: hidden;
+ border-radius: @border-radius-sm;
}
.@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
@@ -221,7 +223,7 @@
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0 0 8px;
- line-height: 42px;
+ line-height: 44px;
transition: all 0.3s ease;
padding-left: 48px;
padding-right: 8px;
diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx
index be9222fc80..4d592615e5 100644
--- a/components/upload/uploadList.tsx
+++ b/components/upload/uploadList.tsx
@@ -30,12 +30,11 @@ export default class UploadList extends React.Component {
}
handlePreview = (file, e) => {
- e.preventDefault();
- const onPreview = this.props.onPreview;
+ const { onPreview } = this.props;
if (!onPreview) {
return;
}
-
+ e.preventDefault();
return onPreview(file);
}
@@ -81,7 +80,7 @@ export default class UploadList extends React.Component {
this.handlePreview(file, e)}
- href={file.url}
+ href={file.thumbUrl || file.url}
target="_blank" rel="noopener noreferrer"
>
@@ -137,9 +136,9 @@ export default class UploadList extends React.Component {
>
- this.handleClose(file)} />
+ this.handleClose(file)} />
- ) : this.handleClose(file)} />
+ ) : this.handleClose(file)} />
}
{progress}