refactor: 文件类型判断

apps/web-antd/src/components/upload/src/helper.ts

@@ -1,3 +1,11 @@
+import { fileTypeFromBlob } from '@vben/utils';
+
+/**
+ * TODO: file-upload暂时使用 需要进行重构
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
 export function checkFileType(file: File, accepts: string[]) {
   let reg;
   if (!accepts || accepts.length === 0) {
@@ -9,24 +17,30 @@ export function checkFileType(file: File, accepts: string[]) {
   return reg.test(file.name);
 }
 
-export function checkImgType(file: File) {
-  return isImgTypeByName(file.name);
-}
-
-export function isImgTypeByName(name: string) {
-  return /\.(?:jpg|jpeg|png|gif|webp)$/i.test(name);
-}
-
-export function getBase64WithFile(file: File) {
-  return new Promise<{
-    file: File;
-    result: string;
-  }>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.addEventListener('load', () =>
-      resolve({ result: reader.result as string, file }),
-    );
-    reader.addEventListener('error', (error) => reject(error));
-  });
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+/**
+ * 判断文件类型是否符合要求
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkImageFileType(file: File, accepts: string[]) {
+  // 空的accepts 使用默认规则
+  if (!accepts || accepts.length === 0) {
+    accepts = defaultImageAccept;
+  }
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  if (accepts.includes(fileType.ext) || accepts.includes(fileType.mime)) {
+    return true;
+  }
+  return false;
 }

apps/web-antd/src/components/upload/src/image-upload.vue

@@ -12,7 +12,7 @@ import { isArray, isFunction, isObject, isString } from 'lodash-es';
 
 import { uploadApi } from '#/api';
 
-import { checkFileType } from './helper';
+import { checkImageFileType, defaultImageAccept } from './helper';
 import { UploadResultStatus } from './typing';
 import { useUploadType } from './use-upload';
 
@@ -21,9 +21,7 @@ defineOptions({ name: 'ImageUpload', inheritAttrs: false });
 const props = withDefaults(
   defineProps<{
     /**
-     * 建议使用拓展名(不带.)
-     * 或者文件头 image/png等(测试判断不准确)  不支持image/*类似的写法
-     * 需自行改造 ./helper/checkFileType方法
+     * 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
      */
     accept?: string[];
     api?: (...args: any[]) => Promise<any>;
@@ -49,7 +47,7 @@ const props = withDefaults(
     helpText: '',
     maxSize: 2,
     maxNumber: 1,
-    accept: () => [],
+    accept: () => defaultImageAccept,
     multiple: false,
     api: uploadApi,
     resultField: '',
@@ -158,9 +156,9 @@ const handleCancel = () => {
   previewTitle.value = '';
 };
 
-const beforeUpload = (file: File) => {
+const beforeUpload = async (file: File) => {
   const { maxSize, accept } = props;
-  const isAct = checkFileType(file, accept);
+  const isAct = await checkImageFileType(file, accept);
   if (!isAct) {
     message.error($t('component.upload.acceptUpload', [accept]));
     isActMsg.value = false;

packages/utils/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
+    "file-type": "^19.5.0",
     "vue-router": "catalog:"
   }
 }

packages/utils/src/index.ts

@@ -2,3 +2,4 @@ export * from './helpers';
 export * from '@vben-core/shared/cache';
 export * from '@vben-core/shared/color';
 export * from '@vben-core/shared/utils';
+export * from 'file-type';