fix: 简化

src/api/module/file.js

@@ -64,6 +64,7 @@ export default {
       method: 'get',
       params: params,
       responseType: 'blob',
+      withCredentials: false,
       headers: {
         Accept: 'application/force-download;application/octet-stream;'
       }

src/components/view_file/index.vue

@@ -8,6 +8,17 @@
             <div class="preview-inner" ref="preview-inner">
               <div class="preview-mark" ref="bg-mark" id="bg-mark"></div>
               <div class="output" v-show="!renderLoading" ref="output"></div>
+              <div class="loading" v-if="renderLoading">
+                <el-spinner>
+                  <template #default>
+                    <div class="spinner">
+                      <div class="bounce1"></div>
+                      <div class="bounce2"></div>
+                      <div class="bounce3"></div>
+                    </div>
+                  </template>
+                </el-spinner>
+              </div>
             </div>
           </div>
           <view-other-component
@@ -35,14 +46,11 @@ export default {
         return {}
       },
     },
-    renderLoading: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
       reFreshFlag: false,
+      renderLoading: false,
     }
   },
   computed: {
@@ -95,7 +103,10 @@ export default {
       handler(newFile) {
         if (newFile && newFile.type) {
           try {
-            this.renderResult(newFile.fileBuffer, newFile.type)
+            this.renderLoading = true
+            this.renderResult(newFile.fileBuffer, newFile.type).finally(() => {
+                this.renderLoading = false
+            })
           } catch (error) {
             console.warn(error)
           }
@@ -151,6 +162,18 @@ export default {
       width: 100%;
       height: ~"calc(100% - 36px)";
       overflow: hidden;
+      .preview-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        .loading {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 999;
+        }
+      }
     }
   }
 }

src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-23 16:56:47
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-24 09:38:53
+ * @LastEditTime: 2025-04-24 10:55:12
  * @Description: 
 -->
 <template>
@@ -47,19 +47,7 @@
         >
       </el-upload>
     </div>
-    <div v-if="renderLoading && !showError" class="loading-process">
-      <el-progress
-        class="file-progress"
-        :text-inside="true"
-        :stroke-width="15"
-        :percentage="percentage"
-      ></el-progress>
-      <span class="load-text">
-        <template v-if="renderLoading && loadLoading">文件加载中....</template>
-        <template v-else>加载完成，文件显示中....</template>
-      </span>
-    </div>
-    <view-file-component :file="previewFile" :render-loading="renderLoading" />
+    <view-file-component :file="previewFile"/>
   </div>
 </template>
 
@@ -75,16 +63,13 @@ export default {
   data() {
     return {
       previewFile: {
-        filename: "",
-        type: "",
-        fileBuffer: null,
+        filename: "", //文件名
+        type: "", //文件类型
+        fileBuffer: null, //文件字节流
       },
-      loadLoading: false, // 文件加载
-      renderLoading: false, // 文件渲染
       showError: false, // 文件出错
-      percentage: 0,
       downloadUrl: "", // 添加输入框绑定值
-      downloading: false, // 添加加载状态
+      downloading: false, // 加载状态
       urlOptions: [
         {
           value:
@@ -120,41 +105,12 @@ export default {
         this.$message.warning("请输入文件预览地址")
         return
       }
-
       this.downloading = true
-      this.loadLoading = true
-      this.renderLoading = true
       this.showError = false
 
-      const progressFunc = (progress) => {
-        const percentage = Number(
-          Number(progress.loaded / progress.total) * 100
-        ).toFixed(2)
-        this.percentage = Number(percentage)
-        if (progress.loaded >= progress.total) {
-          this.percentage = 100
-          this.loadLoading = false
-          const progressBar = document.querySelector(
-            ".file-progress .el-progress-bar__outer"
-          )
-          progressBar.style.backgroundColor = "#409eff"
-        }
-      }
-
-      const config = {
-        onDownloadProgress: progressFunc,
-        timeout: 1000 * 60 * 10,
-        withCredentials: false, // Disable credentials for cross-origin requests
-        headers: {
-          Accept: "application/json;charset=utf-8",
-        },
-      }
-
       file
-        .previewCabinetFileByUrl(this.downloadUrl, config)
+        .previewCabinetFileByUrl(this.downloadUrl)
         .then((res) => {
-          this.percentage = 100
-          // 从URL中获取文件名和类型
           const urlParts = this.downloadUrl.split("/")
           const fileName = urlParts[urlParts.length - 1]
           const fileType =
@@ -162,9 +118,8 @@ export default {
               .split("?")[0]
               .match(/\.([^.]+)$/)?.[1]
               ?.toLowerCase() || ""
-
           this.previewFile.filename = fileName.split(".")[0]
-          this.previewFile.type = fileType
+          this.previewFile.type = fileName.split('.').pop().toLowerCase()
           // 更新文件信息
           return readBuffer(res.data).then((arrayBuffer) => {
             this.previewFile.fileBuffer = arrayBuffer
@@ -177,12 +132,9 @@ export default {
         .catch((error) => {
           this.$message.error("文件加载失败：" + error.message)
           this.showError = true
-          console.log("this.showError", this.showError)
         })
         .finally(() => {
           this.downloading = false
-          this.loadLoading = false
-          this.renderLoading = false
         })
     },
     async handleFileChange(file) {
@@ -190,13 +142,7 @@ export default {
         this.$message.warning("请选择文件")
         return
       }
-
-      this.downloading = true
-      this.loadLoading = true
-      this.renderLoading = true
       this.showError = false
-      this.percentage = 0
-
       try {
         // 获取文件类型
         const fileName = file.name
@@ -239,15 +185,6 @@ export default {
           reader.onload = () => resolve(reader.result)
           reader.onerror = reject
           reader.readAsArrayBuffer(file.raw)
-
-          reader.onprogress = (event) => {
-            if (event.lengthComputable) {
-              const percentage = Number(
-                Number(event.loaded / event.total) * 100
-              ).toFixed(2)
-              this.percentage = Number(percentage)
-            }
-          }
         })
 
         // 设置文件缓冲区
@@ -256,10 +193,6 @@ export default {
       } catch (error) {
         this.$message.error("文件加载失败：" + error.message)
         this.showError = true
-      } finally {
-        this.downloading = false
-        this.loadLoading = false
-        this.renderLoading = false
       }
     },
   },