From 35654372a64ceb0c0c0cd3a69d6050004c947669 Mon Sep 17 00:00:00 2001 From: keven1024 Date: Sat, 11 Apr 2026 11:54:39 +0800 Subject: [PATCH] chore(front): add file-type and heic-to dependencies, and update FileIcon component to support file type detection --- front/components/FileIcon/Index.vue | 17 ++++++- front/package.json | 2 + pnpm-lock.yaml | 69 +++++++++++++++++++++++++++++ 3 files changed, 86 insertions(+), 2 deletions(-) diff --git a/front/components/FileIcon/Index.vue b/front/components/FileIcon/Index.vue index e5b9f70..f8487cd 100644 --- a/front/components/FileIcon/Index.vue +++ b/front/components/FileIcon/Index.vue @@ -3,6 +3,8 @@ import { cx } from 'class-variance-authority' import FileIcon from './File.vue' import ImageIcon from './Image.vue' import VideoIcon from './Video.vue' +import { fileTypeFromBuffer } from 'file-type' + export type filePreview = { type: string name: string @@ -20,8 +22,19 @@ const props = withDefaults( } ) const isFile = computed(() => props?.file instanceof File) -const isImage = computed(() => isFile.value && props?.file?.type?.startsWith('image/')) -const isVideo = computed(() => isFile.value && props?.file?.type?.startsWith('video/')) +const { state: fileType } = useAsyncState(async () => { + if (!isFile.value) { + return null + } + if (!!props?.file?.type) { + return props?.file?.type + } + const { mime } = (await fileTypeFromBuffer(await (props?.file as File)?.arrayBuffer())) || {} + return mime +}, null) + +const isImage = computed(() => isFile.value && fileType.value?.startsWith('image/')) +const isVideo = computed(() => isFile.value && fileType.value?.startsWith('video/'))