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;