diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index df69927a0d..15f0913c87 100644 --- a/components/upload/UploadList.tsx +++ b/components/upload/UploadList.tsx @@ -13,6 +13,10 @@ const previewFile = (file: File, callback: Function) => { reader.readAsDataURL(file); }; +const isImageUrl = (url: string): boolean => { + return /^data:image\//.test(url) || /\.(webp|svg|png|gif|jpg|jpeg)$/.test(url); +}; + export default class UploadList extends React.Component { static defaultProps = { listType: 'text', // or picture @@ -77,6 +81,14 @@ export default class UploadList extends React.Component { } else if (!file.thumbUrl && !file.url) { icon = ; } else { + let thumbnail = isImageUrl((file.thumbUrl || file.url) as string) ? ( + {file.name} + ) : ( + + ); icon = ( { target="_blank" rel="noopener noreferrer" > - {file.name} + {thumbnail} ); } diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index 422ee281ea..350fa6101c 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -221,3 +221,66 @@ exports[`Upload List should be uploading when upload a file 2`] = ` `; + +exports[`Upload List should non-image format file preview 1`] = ` + +
+ + + + +
+
+
+ + +
+
+
+`; diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index f555b0463b..cf730f9381 100644 --- a/components/upload/__tests__/uploadlist.test.js +++ b/components/upload/__tests__/uploadlist.test.js @@ -261,4 +261,26 @@ describe('Upload List', () => { await delay(20); expect(wrapper.state().fileList[2].thumbUrl).not.toBeFalsy(); }); + + it('should non-image format file preview', () => { + const list = [ + { + ...fileList[0], + uid: -3, + url: 'https://cdn.xxx.com/aaa.zip', + thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk', + originFileObj: new File([], 'aaa.zip'), + }, + ]; + + const wrapper = mount( + + + + ); + expect(wrapper.render()).toMatchSnapshot(); + }); });