视频组件

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`,
     },

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>

components/apolloTable/component/base/extra/upload/utils.ts

 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') {