From 638cdc29990f0d9fdf6aa31b5b32ab18c9b96466 Mon Sep 17 00:00:00 2001
From: zhuyangbin <zhuyangbin@mttop.cn>
Date: Tue, 8 Sep 2020 18:05:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/base/extra/upload/fileType.ts   |  9 +++++++
 .../component/base/extra/upload/preview.tsx   | 26 +++++++++++++++----
 .../component/base/extra/upload/utils.ts      |  2 +-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/components/apolloTable/component/base/extra/upload/fileType.ts b/components/apolloTable/component/base/extra/upload/fileType.ts
index 750e5e6..f3e7cd4 100644
--- a/components/apolloTable/component/base/extra/upload/fileType.ts
+++ b/components/apolloTable/component/base/extra/upload/fileType.ts
@@ -25,6 +25,15 @@ export const fileType = {
     pdf: {
         thumbUrl: `${CDN_PATH}/pdfIcon.png`,
     },
+    mp4: {
+        thumbUrl: `${CDN_PATH}/videoIcon.png`,
+    },
+    webm: {
+        thumbUrl: `${CDN_PATH}/videoIcon.png`,
+    },
+    ogg: {
+        thumbUrl: `${CDN_PATH}/videoIcon.png`,
+    },
     other: {
         thumbUrl: `${CDN_PATH}/otherIcon.png`,
     },
diff --git a/components/apolloTable/component/base/extra/upload/preview.tsx b/components/apolloTable/component/base/extra/upload/preview.tsx
index 6a1db5e..3f4fa4c 100644
--- a/components/apolloTable/component/base/extra/upload/preview.tsx
+++ b/components/apolloTable/component/base/extra/upload/preview.tsx
@@ -10,6 +10,8 @@ export default class uploadDetail extends React.Component {
     };
 
     onPreview = (url:string, name:string) => {
+        console.log('name: ', name);
+        console.log('url: ', url);
         const nameTypeArr = name.match(/\.[a-zA-Z0-9]+$/);
         const urlTypeArr = url.match(/\.[a-zA-Z0-9]+$/);
         const typeArr = nameTypeArr || urlTypeArr;
@@ -21,6 +23,8 @@ export default class uploadDetail extends React.Component {
             this.setState({ showDialog: true, type: 'office', url });
         } else if (type === 'pdf') {
             this.setState({ showDialog: true, type: 'pdf', url });
+        } else if (['mp4', 'webm', 'ogg'].includes(type)) {
+            this.setState({ showDialog: true, type: 'video', url });
         } else {
             message.warn('暂不支持预览');
         }
@@ -35,17 +39,29 @@ export default class uploadDetail extends React.Component {
         const { showDialog, type, url } = this.state;
         return (
             <div>
-                <Modal className={styles.dialog} visible={showDialog} onCancel={this.handleCancel} footer={null}>
+                <Modal
+                    className={styles.dialog}
+                    visible={showDialog}
+                    onCancel={this.handleCancel}
+                    footer={null}
+                    destroyOnClose
+                >
                     <div>
-                        {type === 'image' ? <img alt="example" style={{ width: '100%' }} src={url} /> : null}
-                        {type === 'office' ? (
+                        {type === 'image' && <img alt="example" style={{ width: '100%' }} src={url} />}
+                        {type === 'office' && (
                             <iframe
+                                title="office"
                                 width="100%"
                                 height={500}
                                 src={`https://view.officeapps.live.com/op/view.aspx?src=${url}`}
                             />
-                        ) : null}
-                        {type === 'pdf' ? <iframe width="100%" height={500} src={`${url}`} /> : null}
+                        ) }
+                        {type === 'pdf' && <iframe width="100%" height={500} src={`${url}`} title="pdf" />}
+                        {type === 'video' && (
+                            <video src={url} controls width="100%">
+                                你的浏览器暂不支持该视频在线播放,请下载后播放
+                            </video>
+                        )}
                     </div>
                 </Modal>
             </div>
diff --git a/components/apolloTable/component/base/extra/upload/utils.ts b/components/apolloTable/component/base/extra/upload/utils.ts
index 13983b5..8cc0d0f 100644
--- a/components/apolloTable/component/base/extra/upload/utils.ts
+++ b/components/apolloTable/component/base/extra/upload/utils.ts
@@ -1,7 +1,7 @@
 import { fileType } from './fileType';
 
 export const checkoutFileType = (url = '') => {
-    const typeArr = url.match(/\.[a-zA-Z]+$/);
+    const typeArr = url.match(/\.[a-zA-Z0-9]+$/);
     let type = typeArr && typeArr[0] ? typeArr[0].replace('.', '') : '';
     type = type.toLowerCase();
     if (type === 'png' || type === 'jpg' || type === 'gif' || type === 'bmp' || type === 'jpeg') {
-- 
2.21.0