Skip to content

Commit 40a65d1

Browse files
tangjinzhoutangjinzhou
committed
feat: upload add crossOrigin
1 parent 8ad9317 commit 40a65d1

File tree

8 files changed

+48
-66
lines changed

8 files changed

+48
-66
lines changed

‎components/upload/Upload.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,7 @@ export default defineComponent({
315315
typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
316316
return showUploadList ? (
317317
<UploadList
318+
prefixCls={prefixCls.value}
318319
listType={props.listType}
319320
items={mergedFileList.value}
320321
previewFile={previewFile}

‎components/upload/UploadList/ListItem.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export default defineComponent({
110110
src={file.thumbUrl || file.url}
111111
alt={file.name}
112112
class={`${prefixCls}-list-item-image`}
113+
crossOrigin={file.crossOrigin}
113114
/>
114115
) : (
115116
iconNode

‎components/upload/index.en-US.md

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
4444
| previewIcon | custom preview icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
4545
| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 3.0 | |
4646
| removeIcon | custom remove icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
47-
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) | |
47+
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) | |
4848
| supportServerRender | Need to be turned on while the server side is rendering. | boolean | false | | |
4949
| withCredentials | ajax upload with cookie sent | boolean | false | | |
5050

@@ -63,14 +63,15 @@ Uploading is the process of publishing information (web pages, text, pictures, v
6363

6464
Extends File with additional props.
6565

66-
| Property | Description | Type | Default |
67-
| --- | --- | --- | --- |
68-
| name | File name | string | - |
69-
| percent | Upload progress percent | number | - |
70-
| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |
71-
| thumbUrl | Thumb image url | string | - |
72-
| uid | unique id. Will auto generate when not provided | string | - |
73-
| url | Download url | string | - |
66+
| Property | Description | Type | Default | Version |
67+
| --- | --- | --- | --- | --- |
68+
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.3.0 |
69+
| name | File name | string | - | |
70+
| percent | Upload progress percent | number | - | |
71+
| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | |
72+
| thumbUrl | Thumb image url | string | - | |
73+
| uid | unique id. Will auto generate when not provided | string | - | |
74+
| url | Download url | string | - | |
7475

7576
### change
7677

@@ -125,3 +126,11 @@ See <https://github.com/react-component/upload#customrequest>.
125126
### Why does `change` sometimes return File object and other times return { originFileObj: File }?
126127

127128
For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before major release.
129+
130+
### Why sometime Chrome can not upload?
131+
132+
Chrome update will also break native upload. Please restart chrome to finish the upload work. Ref:
133+
134+
- [#32672](https://github.com/ant-design/ant-design/issues/32672)
135+
- [#32913](https://github.com/ant-design/ant-design/issues/32913)
136+
- [#33988](https://github.com/ant-design/ant-design/issues/33988)

‎components/upload/index.zh-CN.md

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
6464

6565
继承自 File，附带额外属性用于渲染。
6666

67-
| 参数 | 说明 | 类型 | 默认值 |
68-
| --- | --- | --- | --- |
69-
| name | 文件名 | string | - |
70-
| percent | 上传进度 | number | - |
71-
| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |
72-
| thumbUrl | 缩略图地址 | string | - |
73-
| uid | 唯一标识符，不设置时会自动生成 | string | - |
74-
| url | 下载地址 | string | - |
67+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
68+
| --- | --- | --- | --- | --- |
69+
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.3.0 |
70+
| name | 文件名 | string | - | - |
71+
| percent | 上传进度 | number | - | - |
72+
| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
73+
| thumbUrl | 缩略图地址 | string | - | - |
74+
| uid | 唯一标识符，不设置时会自动生成 | string | - | - |
75+
| url | 下载地址 | string | - | - |
7576

7677
### change
7778

@@ -126,3 +127,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
126127
### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？
127128

128129
历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。
130+
131+
### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？
132+
133+
与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue：
134+
135+
- [#32672](https://github.com/ant-design/ant-design/issues/32672)
136+
- [#32913](https://github.com/ant-design/ant-design/issues/32913)
137+
- [#33988](https://github.com/ant-design/ant-design/issues/33988)

‎components/upload/interface.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface UploadFile<T = any> {
2727
status?: UploadFileStatus;
2828
percent?: number;
2929
thumbUrl?: string;
30+
crossOrigin?: HTMLImageElement['crossOrigin'];
3031
originFileObj?: FileType;
3132
response?: T;
3233
error?: any;
@@ -49,7 +50,7 @@ export interface ShowUploadListInterface {
4950
export interface UploadChangeParam<T = UploadFile> {
5051
// https://github.com/ant-design/ant-design/issues/14420
5152
file: T;
52-
fileList: UploadFile[];
53+
fileList: T[];
5354
event?: { percent: number };
5455
}
5556

‎components/upload/style/index.less

Lines changed: 8 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -168,9 +168,11 @@
168168
&-btn {
169169
opacity: 0;
170170
}
171+
171172
&-btn.@{ant-prefix}-btn-sm {
172-
height: 20px;
173+
height: @line-height-base * @font-size-base;
173174
line-height: 1;
175+
vertical-align: top;
174176
}
175177

176178
&.picture {
@@ -185,12 +187,16 @@
185187

186188
.@{iconfont-css-prefix} {
187189
color: @upload-actions-color;
190+
transition: all 0.3s;
191+
}
192+
193+
&:hover .@{iconfont-css-prefix} {
194+
color: @text-color;
188195
}
189196
}
190197

191198
&-info {
192199
height: 100%;
193-
padding: 0 4px;
194200
transition: background-color 0.3s;
195201

196202
> span {
@@ -210,30 +216,10 @@
210216
}
211217
}
212218

213-
.@{iconfont-css-prefix}-close {
214-
position: absolute;
215-
top: 6px;
216-
right: 4px;
217-
color: @text-color-secondary;
218-
font-size: 10px;
219-
line-height: 0;
220-
cursor: pointer;
221-
opacity: 0;
222-
transition: all 0.3s;
223-
224-
&:hover {
225-
color: @text-color;
226-
}
227-
}
228-
229219
&:hover &-info {
230220
background-color: @item-hover-bg;
231221
}
232222

233-
&:hover .@{iconfont-css-prefix}-close {
234-
opacity: 1;
235-
}
236-
237223
&:hover &-card-actions-btn {
238224
opacity: 1;
239225
}
@@ -369,14 +355,6 @@
369355
margin-top: 0;
370356
padding-left: 56px;
371357
}
372-
373-
.@{iconfont-css-prefix}-close {
374-
position: absolute;
375-
top: 8px;
376-
right: 8px;
377-
line-height: 1;
378-
opacity: 1;
379-
}
380358
}
381359

382360
// ======================== Picture Card ========================
@@ -389,10 +367,6 @@
389367
vertical-align: top;
390368
}
391369

392-
&.@{upload-prefix-cls}-list::after {
393-
display: none;
394-
}
395-
396370
.@{upload-item} {
397371
height: 100%;
398372
margin: 0;

‎components/upload/style/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import '../../style/index.less';
22
import './index.less';
33

44
// style dependencies
5+
// deps-lint-skip: form
56
import '../../button/style';
67
import '../../progress/style';
78
import '../../tooltip/style';

‎components/upload/style/rtl.less

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,6 @@
7272
}
7373
}
7474

75-
.@{iconfont-css-prefix}-close {
76-
.@{upload-prefix-cls}-list-rtl & {
77-
right: auto;
78-
left: 4px;
79-
}
80-
}
81-
8275
&-error &-card-actions {
8376
.@{iconfont-css-prefix} {
8477
.@{upload-prefix-cls}-list-rtl & {
@@ -145,13 +138,6 @@
145138
padding-left: 0;
146139
}
147140
}
148-
149-
.@{iconfont-css-prefix}-close {
150-
.@{upload-prefix-cls}-list-rtl& {
151-
right: auto;
152-
left: 8px;
153-
}
154-
}
155141
}
156142

157143
&-picture-card {

0 commit comments

Comments
 (0)