fix 下载文件

lihua
Showing 4 changed files with 62 additions and 31 deletions
src/api/modules/obsService.ts
src/components/Form/index.vue
src/utils/common.ts
src/views/importFile.vue
--- a/src/api/modules/obsService.ts
View file @662ccab
+++ b/src/api/modules/obsService.ts
View file @662ccab
@@ -38,12 +38,25 @@ export const getDownFileSignByUrl = (fileName) => {
  });
 };
-export const getImageContent = (params) => request({
+//obs下载
-  url: `${import.meta.env.VITE_APP_COMMON_URL}/obs/download-file-stream?filePath=${params.signedUrl}`,
+export const obsDownloadRequest = (params) => {
-  method: 'get',
+  return request({
-  responseType: 'blob',
+    withCredentials: false,
-  headers: { 'Content-Type': params.actualSignedRequestHeaders['Content-Type'] }
+    headers: params.actualSignedRequestHeaders
-});
+      ? {
+          "Content-Type": params.actualSignedRequestHeaders["Content-Type"],
+        }
+      : {},
+    validateStatus: function (status) {
+      return status >= 200;
+    },
+    url: params.signedUrl,
+    responseType: "blob",
+    maxRedirects: 0,
+    data: { unused: 0 },
+    method: "get",
+  });
+};
 //获取上传签名
 export const getUpFileSignByUrl = (params) => {
--- a/src/components/Form/index.vue
View file @662ccab
+++ b/src/components/Form/index.vue
View file @662ccab
@@ -24,9 +24,11 @@ import useUserStore from "@/store/modules/user";
 //   getImageContent
 // } from '@/api/modules/queryService';
 import {
-  getImageContent,
+  parseAndDecodeUrl,
  getUpFileSignByUrl,
-  obsUploadRequest
+  obsUploadRequest,
+  getDownFileSignByUrl,
+  obsDownloadRequest
 } from "@/api/modules/obsService";
 import { Editor, EditorExpose } from '@/components/Editor'
@@ -332,10 +334,15 @@ const handlePictureCardPreview = (file, item) => {
  uploadPreviewVisible.value = true;
 }
-const onUploadFilePreview = (file, item) => {
+const onUploadFilePreview = async (file, item) => {
  let f = formInline.value[item.field].find(i => i.name == file.name);
  let url = f.url;
-  getImageContent(url).then((res: any) => {
+  const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(url).decodedPath);
+  if (!refSignInfo?.data) {
+    refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
+    return;
+  }
+  obsDownloadRequest(refSignInfo?.data).then((res: any) => {
    if (res && !res.msg) {
      let name = f.name;
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1).toLowerCase() : '';
@@ -346,20 +353,19 @@ const onUploadFilePreview = (file, item) => {
      } else {
        download(res, name, fileSuffix);
      }
-      // if (fileSuffix === 'png' || fileSuffix === 'jpeg' || fileSuffix === 'jpg' || fileSuffix === 'pdf' || fileSuffix === 'zip' || fileSuffix === 'rar') {
-      //   let win = window.open(fileUrl, name);
-      //   win && (win.document.title = name);
-      //   return win;
-      // }
-      // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(fileUrl));
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
-  })
+  });
 }
-const downloadTemplate = (url) => {
+const downloadTemplate = async (url) => {
-  getImageContent(url).then((res: any) => {
+  const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(url).decodedPath);
+  if (!refSignInfo?.data) {
+    refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
+    return;
+  }
+  obsDownloadRequest(refSignInfo?.data).then((res: any) => {
    if (res && !res.msg) {
      let urlNames = url.split('/');
      let name = urlNames.at(-1);
@@ -368,12 +374,17 @@ const downloadTemplate = (url) => {
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
-  })
+  });
 }
-const onUploadFileDownload = (file, item) => {
+const onUploadFileDownload = async (file, item) => {
  let url = file.url;
-  getImageContent(url).then((res: any) => {
+  const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(url).decodedPath);
+  if (!refSignInfo?.data) {
+    refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
+    return;
+  }
+  obsDownloadRequest(refSignInfo?.data).then((res: any) => {
    if (res && !res.msg) {
      let f = formInline.value[item.field].find(i => i.name == file.name);
      let name = f.name;
--- a/src/utils/common.ts
View file @662ccab
+++ b/src/utils/common.ts
View file @662ccab
@@ -298,6 +298,16 @@ export const downFile = (fileUrl, fileName) => {
  }, 66)
 }
+//本地文件下载根据Bob流
+export const downFileByBob = (data,fileName) => {
+  let blob = new Blob([data],{type:data.type || 'text'}); // #识别文件类型
+  let objectUrl = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.download = decodeURIComponent(fileName);
+  link.href = objectUrl;
+  link.click();
+}
 // 表单提交参数
 export const setFormFields = (list) => {
  let obj = {};
--- a/src/views/importFile.vue
View file @662ccab
+++ b/src/views/importFile.vue
View file @662ccab
@@ -11,7 +11,7 @@ import Tabs from '@/components/Tabs/index.vue'
 import Table from '@/components/Table/index.vue'
 import Dialog from '@/components/Dialog/index.vue'
 import useCatchStore from "@/store/modules/catch";
-import { download, downFile, getDownloadUrl } from '@/utils/common'
+import { download, downFileByBob, downFile } from '@/utils/common'
 import {
  addImportData,
  deleteImportData,
@@ -23,7 +23,7 @@ import {
 import {
  parseAndDecodeUrl,
  getDownFileSignByUrl,
-  getImageContent
+  obsDownloadRequest 
 } from '@/api/modules/obsService';
 import { commonPageConfig } from '@/utils/enum';
@@ -226,11 +226,9 @@ const tableBtnClick = async (scope, btn) => {
      refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
      return;
    }
-    getImageContent(refSignInfo?.data).then((res: any) => {
+    obsDownloadRequest(refSignInfo?.data).then((res: any) => {
      if (res && !res.msg) {
-        let name = row.filePath;
+        downFileByBob(res, row.fileName);
-        var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
-        download(res, row.fileName, fileSuffix);
      } else {
        res?.msg && ElMessage.error(res?.msg);
      }
@@ -243,12 +241,11 @@ const tableBtnClick = async (scope, btn) => {
      refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
      return;
    }
-    getImageContent(refSignInfo?.data).then((res: any) => {
+    obsDownloadRequest(refSignInfo?.data).then((res: any) => {
      if (res && !res.msg) {
        let name = row.errorFilePath;
-        var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
        let fileName = name ? name.substring(name.lastIndexOf('/') + 1) : ''
-        download(res, fileName, fileSuffix);
+        downFileByBob(res, fileName);
      } else {
        res?.msg && ElMessage.error(res?.msg);
      }