fix： file type mime

Author: cxymds

components/object/info.vue

@@ -565,13 +565,15 @@ const download = async () => {
   try {
     const url = await getSignedUrl(object.value.Key)
     fetch(url).then(async response => {
+      const filename = object.value.Key.split('/').pop() || ''
       // 获取头信息，将 Headers 对象转换为普通对象
+      // 如果服务器没有返回 content-type，根据文件扩展名推断
       const headers: any = {
-        'content-type': response.headers.get('content-type') || 'application/octet-stream',
+        'content-type': getContentType(response.headers, filename),
         filename: response.headers.get('content-disposition')?.split('filename=')[1] || '',
       }
       let blob = await response.blob()
-      exportFile({ headers, data: blob }, object.value.Key.split('/').pop() || '')
+      exportFile({ headers, data: blob }, filename)
     })
   } catch (error: any) {
     message.error(error?.message || t('Download Failed'))

components/object/list.vue

@@ -422,13 +422,15 @@ const downloadFile = async (key: string) => {
   try {
     const url = await objectApi.getSignedUrl(key)
     fetch(url).then(async response => {
-      // 获取头信息
+      const filename = key.split('/').pop() || ''
+      // 获取头信息，将 Headers 对象转换为普通对象
+      // 如果服务器没有返回 content-type，根据文件扩展名推断
       const headers: any = {
-        'content-type': response.headers.get('content-type') || 'application/octet-stream',
+        'content-type': getContentType(response.headers, filename),
         filename: response.headers.get('content-disposition')?.split('filename=')[1] || '',
       }
       let blob = await response.blob()
-      exportFile({ headers, data: blob }, key.split('/').pop() || '')
+      exportFile({ headers, data: blob }, filename)
     })
   } catch (error: any) {
     message.error(error?.message || t('Download Failed'))

components/object/versions.vue

@@ -145,13 +145,15 @@ const previewVersion = (row: any) => emit('preview', row.VersionId)
 const downloadVersion = async (row: any) => {
   const url = await getSignedUrlWithVersion(props.objectKey, row.VersionId)
   fetch(url).then(async response => {
-    // 获取头信息
+    const filename = props.objectKey.split('/').pop() || ''
+    // 获取头信息，将 Headers 对象转换为普通对象
+    // 如果服务器没有返回 content-type，根据文件扩展名推断
     const headers: any = {
-      'content-type': response.headers.get('content-type') || 'application/octet-stream',
+      'content-type': getContentType(response.headers, filename),
       filename: response.headers.get('content-disposition')?.split('filename=')[1] || '',
     }
     let blob = await response.blob()
-    exportFile({ headers, data: blob }, props.objectKey.split('/').pop() || '')
+    exportFile({ headers, data: blob }, filename)
   })
 }
 

components/object/view.vue

@@ -553,13 +553,15 @@ const download = async () => {
   try {
     const url = await getSignedUrl(object.value.Key)
     fetch(url).then(async response => {
-      // 获取头信息
+      const filename = object.value.Key.split('/').pop() || ''
+      // 获取头信息，将 Headers 对象转换为普通对象
+      // 如果服务器没有返回 content-type，根据文件扩展名推断
       const headers: any = {
-        'content-type': response.headers.get('content-type') || 'application/octet-stream',
+        'content-type': getContentType(response.headers, filename),
         filename: response.headers.get('content-disposition')?.split('filename=')[1] || '',
       }
       let blob = await response.blob()
-      exportFile({ headers, data: blob }, object.value.Key.split('/').pop() || '')
+      exportFile({ headers, data: blob }, filename)
     })
   } catch (error: any) {
     message.error(error?.message || t('Download Failed'))

utils/index.ts

@@ -1,2 +1,3 @@
 export * from './array'
 export * from './functions'
+export * from './mime-types'

utils/mime-types.ts

@@ -0,0 +1,94 @@
+/**
+ * 根据文件扩展名获取 MIME 类型
+ * @param filename 文件名
+ * @returns MIME 类型
+ */
+export function getMimeTypeFromFilename(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() || ''
+
+  const mimeTypes: Record<string, string> = {
+    // 图片
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    ico: 'image/x-icon',
+    bmp: 'image/bmp',
+    tiff: 'image/tiff',
+    tif: 'image/tiff',
+
+    // 视频
+    mp4: 'video/mp4',
+    webm: 'video/webm',
+    ogv: 'video/ogg',
+    avi: 'video/x-msvideo',
+    mov: 'video/quicktime',
+    wmv: 'video/x-ms-wmv',
+    flv: 'video/x-flv',
+    mkv: 'video/x-matroska',
+
+    // 音频
+    mp3: 'audio/mpeg',
+    wav: 'audio/wav',
+    ogg: 'audio/ogg',
+    oga: 'audio/ogg',
+    m4a: 'audio/mp4',
+    flac: 'audio/flac',
+    aac: 'audio/aac',
+
+    // 文档
+    pdf: 'application/pdf',
+    doc: 'application/msword',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    xls: 'application/vnd.ms-excel',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    ppt: 'application/vnd.ms-powerpoint',
+    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    txt: 'text/plain',
+    csv: 'text/csv',
+    rtf: 'application/rtf',
+
+    // 压缩文件
+    zip: 'application/zip',
+    rar: 'application/x-rar-compressed',
+    '7z': 'application/x-7z-compressed',
+    tar: 'application/x-tar',
+    gz: 'application/gzip',
+    bz2: 'application/x-bzip2',
+
+    // Web 文件
+    html: 'text/html',
+    htm: 'text/html',
+    css: 'text/css',
+    js: 'application/javascript',
+    json: 'application/json',
+    xml: 'application/xml',
+
+    // 其他常见格式
+    wasm: 'application/wasm',
+    ttf: 'font/ttf',
+    otf: 'font/otf',
+    woff: 'font/woff',
+    woff2: 'font/woff2',
+    eot: 'application/vnd.ms-fontobject',
+  }
+
+  return mimeTypes[ext] || 'application/octet-stream'
+}
+
+/**
+ * 从响应头中获取内容类型，如果没有则根据文件名推断
+ * @param headers Response Headers 对象
+ * @param filename 文件名
+ * @returns MIME 类型
+ */
+export function getContentType(headers: Headers, filename: string): string {
+  const contentType = headers.get('content-type')
+  if (contentType) {
+    return contentType
+  }
+  // 如果服务器没有返回 content-type，根据文件扩展名推断
+  return getMimeTypeFromFilename(filename)
+}