feat: upload add crossOrigin
tangjinzhou
parent
8ad9317d11
commit
40a65d19da
|
|
@ -315,6 +315,7 @@ export default defineComponent({
|
|||
typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
|
||||
return showUploadList ? (
|
||||
<UploadList
|
||||
prefixCls={prefixCls.value}
|
||||
listType={props.listType}
|
||||
items={mergedFileList.value}
|
||||
previewFile={previewFile}
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ export default defineComponent({
|
|||
src={file.thumbUrl || file.url}
|
||||
alt={file.name}
|
||||
class={`${prefixCls}-list-item-image`}
|
||||
crossOrigin={file.crossOrigin}
|
||||
/>
|
||||
) : (
|
||||
iconNode
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
|
|||
| previewIcon | custom preview icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
|
||||
| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 3.0 | |
|
||||
| removeIcon | custom remove icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
|
||||
| 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) | |
|
||||
| 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) | |
|
||||
| supportServerRender | Need to be turned on while the server side is rendering. | boolean | false | | |
|
||||
| withCredentials | ajax upload with cookie sent | boolean | false | | |
|
||||
|
||||
|
|
@ -63,14 +63,15 @@ Uploading is the process of publishing information (web pages, text, pictures, v
|
|||
|
||||
Extends File with additional props.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| name | File name | string | - |
|
||||
| percent | Upload progress percent | number | - |
|
||||
| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |
|
||||
| thumbUrl | Thumb image url | string | - |
|
||||
| uid | unique id. Will auto generate when not provided | string | - |
|
||||
| url | Download url | string | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.3.0 |
|
||||
| name | File name | string | - | |
|
||||
| percent | Upload progress percent | number | - | |
|
||||
| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | |
|
||||
| thumbUrl | Thumb image url | string | - | |
|
||||
| uid | unique id. Will auto generate when not provided | string | - | |
|
||||
| url | Download url | string | - | |
|
||||
|
||||
### change
|
||||
|
||||
|
|
@ -125,3 +126,11 @@ See <https://github.com/react-component/upload#customrequest>.
|
|||
### Why does `change` sometimes return File object and other times return { originFileObj: File }?
|
||||
|
||||
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.
|
||||
|
||||
### Why sometime Chrome can not upload?
|
||||
|
||||
Chrome update will also break native upload. Please restart chrome to finish the upload work. Ref:
|
||||
|
||||
- [#32672](https://github.com/ant-design/ant-design/issues/32672)
|
||||
- [#32913](https://github.com/ant-design/ant-design/issues/32913)
|
||||
- [#33988](https://github.com/ant-design/ant-design/issues/33988)
|
||||
|
|
|
|||
|
|
@ -64,14 +64,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
|||
|
||||
继承自 File，附带额外属性用于渲染。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 文件名 | string | - |
|
||||
| percent | 上传进度 | number | - |
|
||||
| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |
|
||||
| thumbUrl | 缩略图地址 | string | - |
|
||||
| uid | 唯一标识符，不设置时会自动生成 | string | - |
|
||||
| url | 下载地址 | string | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.3.0 |
|
||||
| name | 文件名 | string | - | - |
|
||||
| percent | 上传进度 | number | - | - |
|
||||
| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
|
||||
| thumbUrl | 缩略图地址 | string | - | - |
|
||||
| uid | 唯一标识符，不设置时会自动生成 | string | - | - |
|
||||
| url | 下载地址 | string | - | - |
|
||||
|
||||
### change
|
||||
|
||||
|
|
@ -126,3 +127,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
|||
### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？
|
||||
|
||||
历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。
|
||||
|
||||
### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？
|
||||
|
||||
与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue：
|
||||
|
||||
- [#32672](https://github.com/ant-design/ant-design/issues/32672)
|
||||
- [#32913](https://github.com/ant-design/ant-design/issues/32913)
|
||||
- [#33988](https://github.com/ant-design/ant-design/issues/33988)
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export interface UploadFile<T = any> {
|
|||
status?: UploadFileStatus;
|
||||
percent?: number;
|
||||
thumbUrl?: string;
|
||||
crossOrigin?: HTMLImageElement['crossOrigin'];
|
||||
originFileObj?: FileType;
|
||||
response?: T;
|
||||
error?: any;
|
||||
|
|
@ -49,7 +50,7 @@ export interface ShowUploadListInterface {
|
|||
export interface UploadChangeParam<T = UploadFile> {
|
||||
// https://github.com/ant-design/ant-design/issues/14420
|
||||
file: T;
|
||||
fileList: UploadFile[];
|
||||
fileList: T[];
|
||||
event?: { percent: number };
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -168,9 +168,11 @@
|
|||
&-btn {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-btn.@{ant-prefix}-btn-sm {
|
||||
height: 20px;
|
||||
height: @line-height-base * @font-size-base;
|
||||
line-height: 1;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.picture {
|
||||
|
|
@ -185,12 +187,16 @@
|
|||
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @upload-actions-color;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover .@{iconfont-css-prefix} {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
height: 100%;
|
||||
padding: 0 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
> span {
|
||||
|
|
@ -210,30 +216,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 4px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 10px;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &-info {
|
||||
background-color: @item-hover-bg;
|
||||
}
|
||||
|
||||
&:hover .@{iconfont-css-prefix}-close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover &-card-actions-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -369,14 +355,6 @@
|
|||
margin-top: 0;
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
line-height: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ======================== Picture Card ========================
|
||||
|
|
@ -389,10 +367,6 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.@{upload-prefix-cls}-list::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.@{upload-item} {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import '../../style/index.less';
|
|||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: form
|
||||
import '../../button/style';
|
||||
import '../../progress/style';
|
||||
import '../../tooltip/style';
|
||||
|
|
|
|||
|
|
@ -72,13 +72,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-error &-card-actions {
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
|
|
@ -145,13 +138,6 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: auto;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-picture-card {
|
||||
|
|
|
|||
Loading…
Reference in New Issue