diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx
index dd60c06d7c..e869cbde7d 100644
--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@@ -104,6 +104,7 @@ const ListItem = React.forwardRef(
src={file.thumbUrl || file.url}
alt={file.name}
className={`${prefixCls}-list-item-image`}
+ crossOrigin={file.crossOrigin}
/>
) : (
iconNode
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
index 703a503366..6e937b35ba 100644
--- a/components/upload/__tests__/uploadlist.test.js
+++ b/components/upload/__tests__/uploadlist.test.js
@@ -1240,4 +1240,134 @@ describe('Upload List', () => {
const wrapper = mount();
wrapper.unmount();
});
+
+ it('should not exist crossorigin attribute when does not set file.crossorigin in case of listType="picture"', () => {
+ const list = [
+ {
+ uid: '0',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ },
+ ];
+
+ const wrapper = mount(
+
+
+ ,
+ );
+ list.forEach((file, i) => {
+ const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
+ expect(imgNode.prop('crossOrigin')).toBe(undefined);
+ expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
+ });
+ wrapper.unmount();
+ });
+
+ it('should exist crossorigin attribute when set file.crossorigin in case of listType="picture"', () => {
+ const list = [
+ {
+ uid: '0',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ crossOrigin: '',
+ },
+ {
+ uid: '1',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ crossOrigin: 'anonymous',
+ },
+ {
+ uid: '2',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ crossOrigin: 'use-credentials',
+ },
+ ];
+
+ const wrapper = mount(
+
+
+ ,
+ );
+ list.forEach((file, i) => {
+ const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
+ expect(imgNode.prop('crossOrigin')).not.toBe(undefined);
+ expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
+ });
+ wrapper.unmount();
+ });
+
+ it('should not exist crossorigin attribute when does not set file.crossorigin in case of listType="picture-card"', () => {
+ const list = [
+ {
+ uid: '0',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ },
+ ];
+
+ const wrapper = mount(
+
+
+ ,
+ );
+ list.forEach((file, i) => {
+ const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
+ expect(imgNode.prop('crossOrigin')).toBe(undefined);
+ expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
+ });
+ wrapper.unmount();
+ });
+
+ it('should exist crossorigin attribute when set file.crossorigin in case of listType="picture-card"', () => {
+ const list = [
+ {
+ uid: '0',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ crossOrigin: '',
+ },
+ {
+ uid: '1',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ crossOrigin: 'anonymous',
+ },
+ {
+ uid: '2',
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ crossOrigin: 'use-credentials',
+ },
+ ];
+
+ const wrapper = mount(
+
+
+ ,
+ );
+ list.forEach((file, i) => {
+ const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
+ expect(imgNode.prop('crossOrigin')).not.toBe(undefined);
+ expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
+ });
+ wrapper.unmount();
+ });
});
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 10903a9177..2f7de69efe 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -60,6 +60,7 @@ Extends File with additional props.
| thumbUrl | Thumb image url | string | - |
| uid | unique id. Will auto generate when not provided | string | - |
| url | Download url | string | - |
+| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - |
### onChange
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index d167781294..08f55ea1e5 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -61,6 +61,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
| thumbUrl | 缩略图地址 | string | - |
| uid | 唯一标识符,不设置时会自动生成 | string | - |
| url | 下载地址 | string | - |
+| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - |
### onChange
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index e523884381..9e5d20705e 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -27,6 +27,7 @@ export interface UploadFile {
status?: UploadFileStatus;
percent?: number;
thumbUrl?: string;
+ crossOrigin?: React.ImgHTMLAttributes['crossOrigin'];
originFileObj?: RcFile;
response?: T;
error?: any;