@titaui/pc 1.9.45 → 1.9.49

package/src/components/upload/index.tsx

@@ -1,15 +1,15 @@
-import React, { PureComponent } from 'react';
-import { Tooltip } from 'tita-ui';
-import uuid from 'uuid';
-import Portals from '../../components-v1/portals/Portals';
-import { getApiUrl } from '../../utils/request-v1';
-import Toast from '../toast'
-import UploadedPreview from './components/uploadedPreview';
-import { UploadResultObj, UploadFilesObj, _dealAttachmentType } from './type';
-import { UploadFormContainer } from './style';
-import ImgViewer from '../img-viewer';
-import { getPreviewImgs } from './util';
-import { getLocale } from '../../utils/getLocale';
+import React, { PureComponent } from "react";
+import { Tooltip } from "tita-ui";
+import uuid from "uuid";
+import Portals from "../../components-v1/portals/Portals";
+import { getApiUrl } from "../../utils/request-v1";
+import Toast from "../toast";
+import UploadedPreview from "./components/uploadedPreview";
+import { UploadResultObj, UploadFilesObj, _dealAttachmentType } from "./type";
+import { UploadFormContainer } from "./style";
+import ImgViewer from "../img-viewer";
+import { getPreviewImgs } from "./util";
+import { getLocale } from "../../utils/getLocale";
 
 interface Props {
   action?: string;
@@ -23,7 +23,7 @@ interface Props {
   attachmentPreviewBox?: string; // 附件预览容器，传id选择器
   submitStatus: number; // 提交状态，1：成功，2：失败
   localStroageKey?: string; // 判断是否上传成功，清空附件列表  localStorageKey
-  onSubmit: (uploadSuccessFilesPath: string[], type?: 'cancel' | 'delete' | 'reload') => void;
+  onSubmit: (uploadSuccessFilesPath: string[], type?: "cancel" | "delete" | "reload") => void;
   onDelete?: (uploadSuccessFilesPath: any) => void;
   style?: React.CSSProperties;
   attachments?: UploadResultObj[];
@@ -52,7 +52,7 @@ export default class Upload extends PureComponent<Props, State> {
     fileSizeLimit: 50,
     filesTotal: 50,
     multiple: true,
-    attachmentPreviewBox: 'MBlog__attachmentViewBox',
+    attachmentPreviewBox: "MBlog__attachmentViewBox",
   };
 
   componentDidMount() {
@@ -83,60 +83,61 @@ export default class Upload extends PureComponent<Props, State> {
   }
 
   onFileInputChange = () => {
-    let fileInput = this.refs.fileInput;
+    const { fileInput } = this.refs;
     // @ts-ignore
-    let selectFiles = fileInput.files; // 选择的文件
+    const selectFiles = fileInput.files; // 选择的文件
     // @ts-ignore
     if (!fileInput.value) return; // 未选择文件或选择文件超出个数限制时
     this.dealSelectFiles(Array.from(selectFiles));
     if (fileInput) {
       // @ts-ignore
-      fileInput.value = '';
+      fileInput.value = "";
     }
   };
 
   // @ts-ignore
   dealSelectFiles = (uploadSelectFilesObj: UploadFilesObj[]) => {
     const { uploadSuccessFiles, selectFiles } = this.state;
-    const { action, fileNumLimit, fileSizeLimit, filesTotal } = this.props;
-    let uploadSelectFilesLen = uploadSelectFilesObj.length; // 选中上传的文件数量
-    let uploadSuccessFilesLen = uploadSuccessFiles.length; // 已上传成功的文件数量
-    let allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen;
+    const {
+      action, fileNumLimit, fileSizeLimit, filesTotal,
+    } = this.props;
+    const uploadSelectFilesLen = uploadSelectFilesObj.length; // 选中上传的文件数量
+    const uploadSuccessFilesLen = uploadSuccessFiles.length; // 已上传成功的文件数量
+    const allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen;
 
     // 把文件字节流保存，用来文件重传用
-    uploadSelectFilesObj.forEach(ele => {
+    uploadSelectFilesObj.forEach((ele) => {
       if (!selectFiles[ele.name]) {
         selectFiles[ele.name] = ele;
       }
-    })
+    });
     this.setState({
-      selectFiles: selectFiles
-    })
+      selectFiles,
+    });
 
     if (filesTotal && allFilesTotal > filesTotal) {
-      Toast.Error(`最多可上传 ${filesTotal} 个文件`, {canClose: false});
+      Toast.Error(`最多可上传 ${filesTotal} 个文件`, { canClose: false });
       uploadSelectFilesObj = uploadSelectFilesObj.slice(
         0,
         (filesTotal as number) - uploadSuccessFilesLen,
       );
     }
     if (fileNumLimit && uploadSelectFilesObj.length > fileNumLimit) {
-      Toast.Error(`单次最多可上传 ${fileNumLimit} 个文件`, {canClose: false});
+      Toast.Error(`单次最多可上传 ${fileNumLimit} 个文件`, { canClose: false });
       uploadSelectFilesObj = uploadSelectFilesObj.slice(0, fileNumLimit);
     }
     if (!uploadSelectFilesObj.length) return;
-    let uploadSelectFilesSize = uploadSelectFilesObj
-      .map(item => item.size)
+    const uploadSelectFilesSize = uploadSelectFilesObj
+      .map((item) => item.size)
       .reduce((total, num) => total + num); // 上传文件的大小
-    if (uploadSelectFilesSize > (fileNumLimit as number) * (fileSizeLimit as number) * 1024 * 1024)
-      return Toast.Error(`单次最多可上传 ${fileNumLimit} 个文件，每个不超过 ${fileSizeLimit}M`); // 文件大小超出限制
+    if (uploadSelectFilesSize > (fileNumLimit as number) * (fileSizeLimit as number) * 1024 * 1024) return Toast.Error(`单次最多可上传 ${fileNumLimit} 个文件，每个不超过 ${fileSizeLimit}M`); // 文件大小超出限制
 
-    let uploadStartFiles: UploadResultObj[] = []; // 开始上传的文件
+    const uploadStartFiles: UploadResultObj[] = []; // 开始上传的文件
     uploadSelectFilesObj.forEach((element: any, index: number) => {
-      let formData = new FormData(); // FormData 对象
+      const formData = new FormData(); // FormData 对象
       let uploadStartFile: UploadResultObj | null = null;
-      let timestamp = new Date().getTime(); // 给每个文件加一个时间戳
-      let uploadFileType = element.name.substring(element.name.lastIndexOf('.') + 1);
+      const timestamp = new Date().getTime(); // 给每个文件加一个时间戳
+      const uploadFileType = element.name.substring(element.name.lastIndexOf(".") + 1);
 
       uploadStartFile = {
         FileName: element.name,
@@ -148,31 +149,29 @@ export default class Upload extends PureComponent<Props, State> {
         uploadStatus: 1, // 开始上传
         IsSuccess: false,
         uid: uuid(),
-        _smallImageUrl: '',
-        _bigImageUrl: '',
-        MediaType: '',
+        _smallImageUrl: "",
+        _bigImageUrl: "",
+        MediaType: "",
         UserId: 0,
         MaxDocCount: 0,
-        DfsPath: '',
-        ClientUrl: '',
-        SmallImageUrl: '',
-        BigImageUrl: '',
-        DownloadUrl: '',
-        Msg: '',
+        DfsPath: "",
+        ClientUrl: "",
+        SmallImageUrl: "",
+        BigImageUrl: "",
+        DownloadUrl: "",
+        Msg: "",
         AllowUploadAttachmentSize: 50,
         Deleteable: true,
-        requestXHR: new XMLHttpRequest(), //在这创建是为了取消用
+        requestXHR: new XMLHttpRequest(), // 在这创建是为了取消用
       };
-      let sameFile = uploadSuccessFiles.find(file =>
-        this.isSameFile(file, uploadStartFile as UploadResultObj) && file.uploadStatus !== 4,
-      );
+      const sameFile = uploadSuccessFiles.find((file) => this.isSameFile(file, uploadStartFile as UploadResultObj) && file.uploadStatus !== 4);
       if (sameFile) {
         return;
-      };
+      }
       uploadStartFiles.push(uploadStartFile);
-      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件      
-      formData.append('file', element);      
-      let url = action || getApiUrl(`Upload/PostFiles?format=json&timestamp=${timestamp}`);
+      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
+      formData.append("file", element);
+      const url = action || getApiUrl(`Upload/PostFiles?format=json&timestamp=${timestamp}`);
       this._dealUploadXHRRequest(formData, url, uploadStartFile);
     });
   };
@@ -189,23 +188,23 @@ export default class Upload extends PureComponent<Props, State> {
   _dealUploadXHRRequest = (formData: any, url: string, uploadStartFile: UploadResultObj) => {
     if (uploadStartFile.FileSize > (this.props.fileSizeLimit as number) * 1024 * 1024) {
       setTimeout(() => {
-        this._dealUploadSuccess({ ...uploadStartFile, ...{ Msg: '上传失败，文件过大', IsImage: false, uploadStatus: 5 } });
+        this._dealUploadSuccess({ ...uploadStartFile, ...{ Msg: "上传失败，文件过大", IsImage: false, uploadStatus: 5 } });
       }, 300);
       return;
     }
-    let xhr = uploadStartFile.requestXHR;
+    const xhr = uploadStartFile.requestXHR;
     xhr.onreadystatechange = () => {
       if (xhr.readyState == 4 && xhr.status == 200) {
-        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据        
+        const result = { ...JSON.parse(xhr.responseText).Result[0] }; // 上传成功接口返回数据
         result.percentComplete = 100;
         result.IsSuccess = !!result.IsSuccess;
         result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
         this._dealUploadSuccess({ ...uploadStartFile, ...result });
       }
     };
-    //进度条部分
-    xhr.upload.onprogress = evt => {
-      let uploadSuccessFiles = [...this.state.uploadSuccessFiles];
+    // 进度条部分
+    xhr.upload.onprogress = (evt) => {
+      const uploadSuccessFiles = [...this.state.uploadSuccessFiles];
       if (evt.lengthComputable) {
         uploadSuccessFiles.forEach((item: UploadResultObj) => {
           if (this.isSameFile(item, uploadStartFile)) {
@@ -216,35 +215,35 @@ export default class Upload extends PureComponent<Props, State> {
         this.setState({ uploadSuccessFiles });
       }
     };
-    xhr.upload.onerror = evt => { 
-      let uploadSuccessFiles = [...this.state.uploadSuccessFiles];
+    xhr.upload.onerror = (evt) => {
+      const uploadSuccessFiles = [...this.state.uploadSuccessFiles];
       uploadSuccessFiles.forEach((item: UploadResultObj) => {
         if (this.isSameFile(item, uploadStartFile)) {
           item.uploadStatus = 4; // 上传失败
           item.percentComplete = Math.round((evt.loaded * 100) / evt.total);
-          item.Msg = '网络异常，请重新上传'
+          item.Msg = "网络异常，请重新上传";
         }
       });
       this.setState({ uploadSuccessFiles });
-    };    
-    xhr.open('POST', url, true);
-    xhr.send(formData); //开始上传，发送form数据
+    };
+    xhr.open("POST", url, true);
+    xhr.send(formData); // 开始上传，发送form数据
   };
 
   // 处理开始上传时的预览
   _dealUploadStart = (uploadStartFiles: UploadResultObj[]) => {
-    let uploadSuccessFiles: UploadResultObj[] = [];
+    const uploadSuccessFiles: UploadResultObj[] = [];
     const uploadedFiles = [...this.state.uploadSuccessFiles];
     // 处理重传文件,直接展开会导致同样的文件展示两个
     let uploadFilesConcatArr = uploadedFiles;
-    let isReloadFile = uploadFilesConcatArr.filter(item => this.isSameFile(item, uploadStartFiles[0]))
+    const isReloadFile = uploadFilesConcatArr.filter((item) => this.isSameFile(item, uploadStartFiles[0]));
     if (!isReloadFile || isReloadFile.length === 0) {
       uploadFilesConcatArr = [...uploadedFiles, ...uploadStartFiles];
     }
 
-    uploadFilesConcatArr.forEach(item => {
-      let res = uploadSuccessFiles.filter(v => this.isSameFile(item, v));
-      uploadSuccessFiles.forEach(element => {
+    uploadFilesConcatArr.forEach((item) => {
+      const res = uploadSuccessFiles.filter((v) => this.isSameFile(item, v));
+      uploadSuccessFiles.forEach((element) => {
         if (this.isSameFile(item, element)) {
           element = item;
         }
@@ -261,11 +260,9 @@ export default class Upload extends PureComponent<Props, State> {
   // 处理上传成功后预览状态更新
   _dealUploadSuccess = (uploadSuccessFile: UploadResultObj) => {
     const { onSubmit } = this.props;
-    let uploadSuccessFiles = [...this.state.uploadSuccessFiles];
-    let uploadSuccessFilesFormat = uploadSuccessFiles.map(element =>
-      this.isSameFile(uploadSuccessFile, element) ? uploadSuccessFile : element,
-    );
-    let uploadSuccessFilesPath = uploadSuccessFilesFormat.map(item => item.DfsPath); // 获取文件上传后返回的路径
+    const uploadSuccessFiles = [...this.state.uploadSuccessFiles];
+    const uploadSuccessFilesFormat = uploadSuccessFiles.map((element) => (this.isSameFile(uploadSuccessFile, element) ? uploadSuccessFile : element));
+    const uploadSuccessFilesPath = uploadSuccessFilesFormat.map((item) => item.DfsPath); // 获取文件上传后返回的路径
 
     onSubmit(uploadSuccessFilesPath); // 将上传完成的文件路径传递给父组件
     this.setState({
@@ -283,33 +280,33 @@ export default class Upload extends PureComponent<Props, State> {
       }
     }
     return newIndex;
-  }
+  };
 
   // 预览、删除附件
   handlerUploadPreviewOptions = (index: number, options: string) => {
     const { onSubmit, onDelete } = this.props;
 
-    if (options === 'cancel') {
+    if (options === "cancel") {
       const reUploadFileInfo = this.state.uploadSuccessFiles[index];
       reUploadFileInfo.requestXHR.abort();
     }
 
-    if (options === 'delete' || options === 'cancel') {
-      let uploadResultFiles = [...this.state.uploadSuccessFiles];
-      let deleteFiles = uploadResultFiles[index];
+    if (options === "delete" || options === "cancel") {
+      const uploadResultFiles = [...this.state.uploadSuccessFiles];
+      const deleteFiles = uploadResultFiles[index];
       onDelete && onDelete(deleteFiles.documentId ? deleteFiles.documentId : deleteFiles.DfsPath);
       uploadResultFiles.splice(index, 1);
 
-      let uploadSuccessFilesPath = uploadResultFiles.map(item => item.DfsPath);
+      const uploadSuccessFilesPath = uploadResultFiles.map((item) => item.DfsPath);
 
       onSubmit(uploadSuccessFilesPath, options as any);
       this.setState({
         uploadSuccessFiles: uploadResultFiles,
       });
-    } else if (options === 'preview') {
+    } else if (options === "preview") {
       const imgIndex = this.getImgIndex(index);
       (this.refs.imgViewerRef as any).show(imgIndex);
-    } else if (options === 'reupload') {
+    } else if (options === "reupload") {
       const reUploadFileInfo = this.state.uploadSuccessFiles[index];
       const reUploadFile = this.state.selectFiles[reUploadFileInfo.FileName];
       this.dealSelectFiles([reUploadFile]);
@@ -317,25 +314,23 @@ export default class Upload extends PureComponent<Props, State> {
   };
 
   // 根据文件名、大小和最后编辑时间判断是否为同一个文件
-  isSameFile = (item: UploadResultObj, element: UploadResultObj) => {
-    return item.FileName === element.FileName && 
-          item.FileSize === element.FileSize && 
-          item.FileLastModified === element.FileLastModified;
-  };
+  isSameFile = (item: UploadResultObj, element: UploadResultObj) => item.FileName === element.FileName
+          && item.FileSize === element.FileSize
+          && item.FileLastModified === element.FileLastModified;
 
-  renderUploadList = list => {
+  renderUploadList = (list) => {
     const { attachmentPreviewBox } = this.props;
     const { attachmentPreviewUrl } = this.state;
     if (!list.length) return;
     return (
-      <Portals domNode={attachmentPreviewBox} className='uploadFile__preview__list'>
-        <ImgViewer data={attachmentPreviewUrl} ref='imgViewerRef' showDownload={false}/>
+      <Portals domNode={attachmentPreviewBox} className="uploadFile__preview__list">
+        <ImgViewer data={attachmentPreviewUrl} ref="imgViewerRef" showDownload={false} />
         {list.map((item: UploadResultObj, index: number) => (
           <UploadedPreview
             uploadResultItem={item}
             index={index}
             key={item.uid}
-            className='uploaded__preview'
+            className="uploaded__preview"
             onSubmit={(index, options) => {
               this.handlerUploadPreviewOptions(index, options);
             }}
@@ -354,7 +349,9 @@ export default class Upload extends PureComponent<Props, State> {
   };
 
   render() {
-    const { children, className, style, attachmentTipText = getLocale('OKR_MyO_KRP_Draganddropu') } = this.props;
+    const {
+      children, className, style, attachmentTipText = getLocale("OKR_MyO_KRP_Draganddropu"),
+    } = this.props;
     const { uploadSuccessFiles } = this.state;
     return (
       <>
@@ -364,17 +361,17 @@ export default class Upload extends PureComponent<Props, State> {
         >
           <UploadFormContainer className={className} style={style} onMouseUp={(e) => this.handleButtonClick(e)}>
             <div
-              ref='uploader-trigger'
-              style={{ cursor: 'pointer' }}
+              ref="uploader-trigger"
+              style={{ cursor: "pointer" }}
             >
               {children}
             </div>
             <input
-              type='file'
-              ref='fileInput'
-              className='upload_file_input'
+              type="file"
+              ref="fileInput"
+              className="upload_file_input"
               multiple={this.props.multiple}
-              style={{ display: 'none' }}
+              style={{ display: "none" }}
               onChange={this.onFileInputChange}
             />
           </UploadFormContainer>

package/src/components/upload/style.ts

@@ -1,9 +1,9 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const UploadFormContainer = styled.div`
   width: auto;
   position: relative;
-`
+`;
 
 export const UploadForm = styled.form`
   width: 100%;
@@ -15,7 +15,7 @@ export const UploadForm = styled.form`
   input {
     width: 100%;
   }
-`
+`;
 
 export const PreviewContent = styled.div`
   width: 320px;
@@ -26,7 +26,7 @@ export const PreviewContent = styled.div`
   background-color: #f7f8fa;
   display: flex;
   align-items: center;
-`
+`;
 
 export const PreviewImageWrapper = styled.div`
   width: 36px;
@@ -41,19 +41,19 @@ export const PreviewImageWrapper = styled.div`
     max-height: 36px;
     border-radius: 4px;
   }
-`
+`;
 
 export const PreviewImageIcon = styled.img`
   width: 36px;
   height: 36px;
-`
+`;
 
 export const PreviewMessageWrapper = styled.div`
   flex: 1;
   display: flex;
   /* justify-content: space-between; */
   align-items: center;
-`
+`;
 
 export const PreviewFileTitle = styled.div`
   width: 184px;
@@ -72,7 +72,7 @@ export const PreviewFileTitle = styled.div`
   .upload-file-size--error {
     color: #f05e5e;
   }
-`
+`;
 
 export const UploadProgress = styled.div`
   margin-top: 8px;
@@ -88,7 +88,7 @@ export const UploadProgress = styled.div`
   .upload-file--progress {
     background: #2879ff;
   }
-`
+`;
 
 export const UploadStatus = styled.span`
   width: 48px;
@@ -99,7 +99,7 @@ export const UploadStatus = styled.span`
   &.preview__status-end {
     opacity: 1;
   }
-`
+`;
 export const PreviewOptionsWrapper = styled.div`
   margin-left: 6px;
   display: flex;
@@ -111,4 +111,4 @@ export const PreviewOptionsWrapper = styled.div`
     vertical-align: middle;
     cursor: pointer;
   }
-`
+`;

package/src/components/upload/type.ts

@@ -35,7 +35,7 @@ export interface UploadFilesObj {
 
 export const _dealAttachmentType = (fileType) => {
   let IsImage = false;
-  let FileType = fileType;
+  const FileType = fileType;
   // if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
   //   IsImage = true;
   //   IconColor = '#44CF85';
@@ -53,5 +53,5 @@ export const _dealAttachmentType = (fileType) => {
   if (/^(jpg|png|gif|jpeg|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
     IsImage = true;
   }
-  return { IsImage, FileType }
-}
+  return { IsImage, FileType };
+};

package/src/components/upload/util.ts

@@ -1,72 +1,69 @@
-import DocSvg from './img/doc.svg';
-import OtherSvg from './img/other.svg';
-import PdfSvg from './img/pdf.svg';
-import PptSvg from './img/ppt.svg';
-import RadioSvg from './img/radio.svg';
-import VideoSvg from './img/video.svg';
-import XlsSvg from './img/xls.svg';
-import { UploadResultObj } from './type';
+import DocSvg from "./img/doc.svg";
+import OtherSvg from "./img/other.svg";
+import PdfSvg from "./img/pdf.svg";
+import PptSvg from "./img/ppt.svg";
+import RadioSvg from "./img/radio.svg";
+import VideoSvg from "./img/video.svg";
+import XlsSvg from "./img/xls.svg";
+import { UploadResultObj } from "./type";
 
 export const getFileSize = (fileSize) => {
   if (fileSize < 1024) {
-    return fileSize + "B";
-  } else if (fileSize < 1024 * 1024) {
+    return `${fileSize}B`;
+  } if (fileSize < 1024 * 1024) {
     let temp = fileSize / 1024;
     temp = Number(temp.toFixed(2));
-    return temp + "KB";
-  } else if (fileSize < 1024 * 1024 * 1024) {
+    return `${temp}KB`;
+  } if (fileSize < 1024 * 1024 * 1024) {
     let temp = fileSize / (1024 * 1024);
     temp = Number(temp.toFixed(2));
-    return temp + "M";
-  } else {
-    let temp = fileSize / (1024 * 1024 * 1024);
-    temp = Number(temp.toFixed(2));
-    return temp + "GB";
+    return `${temp}M`;
   }
+  let temp = fileSize / (1024 * 1024 * 1024);
+  temp = Number(temp.toFixed(2));
+  return `${temp}GB`;
 };
 
 export const getFileTypeMapIcon = (fileType: string) => {
   // if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
-  //   return 
-  // } else 
+  //   return
+  // } else
   if (/^(mp3|ogg|ape|flac)$/.test(fileType.toLowerCase())) {
     return RadioSvg;
-  } else if (/^(avi|wmv|mov|mp4|rmvb)$/.test(fileType.toLowerCase())) {
+  } if (/^(avi|wmv|mov|mp4|rmvb)$/.test(fileType.toLowerCase())) {
     return VideoSvg;
-  } else if (/^(pptx|ppt)$/.test(fileType.toLowerCase())) {
+  } if (/^(pptx|ppt)$/.test(fileType.toLowerCase())) {
     return PptSvg;
-  } else if (/^(doc|docx)$/.test(fileType.toLowerCase())) {
+  } if (/^(doc|docx)$/.test(fileType.toLowerCase())) {
     return DocSvg;
-  } else if (/^(xls|xlsx)$/.test(fileType.toLowerCase())) {
+  } if (/^(xls|xlsx)$/.test(fileType.toLowerCase())) {
     return XlsSvg;
-  } else if (/^(pdf)$/.test(fileType.toLowerCase())) {
+  } if (/^(pdf)$/.test(fileType.toLowerCase())) {
     return PdfSvg;
   }
-  return OtherSvg; 
-}
+  return OtherSvg;
+};
 
 export const isImg = (fileType: string) => {
   if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
     return true;
   }
   return false;
-}
+};
 
-export const getPreviewImgs = (files: UploadResultObj[]) => {
-  return files.filter(file => isImg(file.FileType)).map(file => ({
-    documentId: file.documentId,
-    bigImageUrl: file.ClientUrl,
-    fileName: file.FileName,
-    fileType: file.FileType,
-    previewUrl: file.ClientUrl,
-    deleteable: file.Deleteable,
-    smallImageUrl: file.ClientUrl,
-    createDate: '',
-    documentSource: '',
-    downloadUrl: file.DownloadUrl,
-    imageUrl: file.ClientUrl,
-    relatedFileId: null,
-    size: file.FileSize,
-    thumbnailGenerated: null,
-  }))
-}
+export const getPreviewImgs = (files: UploadResultObj[]) => files.filter((file) => isImg(file.FileType)).map((file) => ({
+  documentId: file.documentId,
+  bigImageUrl: file.ClientUrl,
+  fileName: file.FileName,
+  fileType: file.FileType,
+  previewUrl: file.ClientUrl,
+  deleteable: file.Deleteable,
+  smallImageUrl: file.ClientUrl,
+  createDate: "",
+  documentSource: "",
+  downloadUrl: file.DownloadUrl,
+  imageUrl: file.ClientUrl,
+  relatedFileId: null,
+  size: file.FileSize,
+  thumbnailGenerated: null,
+}));

package/src/components/upload-photo-modal/constant.ts

@@ -1,33 +1,34 @@
 import { getLocale } from "../../utils/getLocale";
+
 export const List = [
-	{
-		id: 'person',
-		accept: '.jpg,.jpeg,.png',
-		autoCropArea: 1,
-		initialAspectRatio: 1,
-		tips: `${getLocale('Set_PI_Onlyjpgsize')} 150*150px`,
-		previewTitle: getLocale('Mod_Preview'),
+  {
+    id: "person",
+    accept: ".jpg,.jpeg,.png",
+    autoCropArea: 1,
+    initialAspectRatio: 1,
+    tips: `${getLocale("Set_PI_Onlyjpgsize")} 150*150px`,
+    previewTitle: getLocale("Mod_Preview"),
     minCropBoxHeight: 60,
     minCropBoxWidth: 60,
-	},
+  },
   {
-		id: 'enterprise',
-		accept: '.jpg,.jpeg,.png',
-		autoCropArea: 1,
-		initialAspectRatio: 5,
-		tips: '建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、png 格式',
-		previewTitle: 'logo 预览',
+    id: "enterprise",
+    accept: ".jpg,.jpeg,.png",
+    autoCropArea: 1,
+    initialAspectRatio: 5,
+    tips: "建议 logo 尺寸 400*80 logo 最佳适配颜色为白色 仅支持 jpg、jpeg、png 格式",
+    previewTitle: "logo 预览",
     minCropBoxHeight: 20,
     minCropBoxWidth: 20,
-	},
+  },
   {
-		id: 'browser',
-		accept: '',
-		autoCropArea: 0.5,
-		initialAspectRatio: 1,
-		tips: '图标尺寸 18*18，超过将被浏览器压缩',
-		previewTitle: '浏览器图标预览',
+    id: "browser",
+    accept: "",
+    autoCropArea: 0.5,
+    initialAspectRatio: 1,
+    tips: "图标尺寸 18*18，超过将被浏览器压缩",
+    previewTitle: "浏览器图标预览",
     minCropBoxHeight: 20,
     minCropBoxWidth: 20,
-	}
+  },
 ];