[web_demo] 文件上传组件优化

package.json

@@ -26,11 +26,13 @@
   "devDependencies": {
     "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^4.0.0",
+    "file-loader": "^6.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.9.3",
     "unplugin-auto-import": "^0.12.1",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.0",
+    "vue-loader": "^17.1.1",
     "vue-tsc": "^1.0.11"
   }
 }

src/components/FileUpload.vue

@@ -4,10 +4,10 @@
             <el-upload class="upload" drag :before-upload="BeforeUpload" :file-list="[]" action=""
                 accept=".jpg,.jpeg,.png,.bmp,.pdf">
                 <i class="el-icon-upload"></i>
+                <div class="file-name" v-if="fileName">{{ fileName }}</div>
                 <div class="upload-text">点击或拖拽上传文件</div>
             </el-upload>
         </div>
-        <div class="file-name" v-if="fileName">{{ fileName }}</div>
     </div>
 </template>
     
@@ -17,6 +17,7 @@ import { usePdfProperty } from '../store/PdfProperty';
 import { storeToRefs } from 'pinia'
 import { fabric } from 'fabric';
 import { ref, onMounted } from 'vue'
+import { defineExpose } from 'vue'
 
 const fileName = ref("")
 
@@ -47,57 +48,54 @@ const { is_pdf, pdf_source } = storeToRefs(pdf_property);
 
 function handleDrop(e: any) {
     e.preventDefault()
-    // console.log(support_format)
+    console.log('handleDrop')
     const files = e.dataTransfer.files
     if (files.length > 0) {
         const file = files[0]
-        const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
-        if (support_format.includes(post_)) {
-            UpdateFile(file)
-        } else {
-            alert('不支持的文件格式！')
-        }
+        UpdateFile(file)
     }
 }
 
 const BeforeUpload = (file: File): boolean | Promise<boolean> => {
-    const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
-    if (support_format.includes(post_)) {
-        UpdateFile(file)
-    } else {
-        alert('不支持的文件格式！')
-    }
-    return true;
+    console.log('BeforeUpload')
+    return UpdateFile(file);
 }
 
 function UpdateFile(file: File) {
-    if (fabric_canvas.value != null) {
-        fabric_canvas.value.dispose();
-        fabric_canvas.value = null;
-    }
-    fileName.value = file.name;
     const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
-    if (post_ == ".pdf") {
-        if (props.isConvert == true) {
-            input_file.value = file;
-        } else {
-            is_pdf.value = true;
-            pdf_source.value = URL.createObjectURL(file);
+    if (support_format.includes(post_)) {
+        if (fabric_canvas.value != null) {
+            fabric_canvas.value.dispose();
+            fabric_canvas.value = null;
         }
-    } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
-        is_pdf.value = false
-        if (show_image.value != null && show_canvas.value != null) {
-            show_image.value.src = URL.createObjectURL(file);
-            show_image.value.onload = () => {
-                show_canvas.value.width = show_image.value.width;
-                show_canvas.value.height = show_image.value.height;
-                fabric_canvas.value = new fabric.Canvas(show_canvas.value);
-                fabric_canvas.value.clear()
+        fileName.value = file.name;
+        if (post_ == ".pdf") {
+            is_pdf.value = true;
+            if (props.isConvert == true) {
+                input_file.value = file;
+            } else {
+                pdf_source.value = URL.createObjectURL(file);
+            }
+        } else if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
+            is_pdf.value = false
+            if (show_image.value != null && show_canvas.value != null) {
+                show_image.value.src = URL.createObjectURL(file);
+                show_image.value.onload = () => {
+                    show_canvas.value.width = show_image.value.width;
+                    show_canvas.value.height = show_image.value.height;
+                    fabric_canvas.value = new fabric.Canvas(show_canvas.value);
+                    fabric_canvas.value.clear()
+                }
             }
+            input_file.value = file;
         }
-        input_file.value = file;
+    } else {
+        alert('不支持的文件格式！')
     }
+    return true;
 }
+
+defineExpose({ UpdateFile })
 </script>
     
 <style scoped lang="less">

src/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DocumentAI Web Demo</title>
-    <script type="module" crossorigin src="./assets/index-2ef0df5a.js"></script>
-    <link rel="stylesheet" href="./assets/index-15b83f1d.css">
+    <script type="module" crossorigin src="./assets/index-d9a132a3.js"></script>
+    <link rel="stylesheet" href="./assets/index-2a05abf2.css">
   </head>
   <body>
     <div id="app"></div>

src/pages/main/router/index.ts

@@ -7,6 +7,7 @@ import tableRec from "@/pages/main/views/Recognize/tableRec.vue";
 import LayoutAnalysis from "@/pages/main/views/Detection/LayoutAnalysis.vue";
 import StampDetection from "@/pages/main/views/Detection/StampDetection.vue";
 import PdfToWord from "@/pages/main/views/Convert/PdfToWord.vue";
+import UIEX from "@/pages/main/views/NLP/UIEX.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -50,6 +51,11 @@ const router = createRouter({
       path: "/PdfToWord",
       name: "PdfToWord",
       component: PdfToWord,
+    },
+    {
+      path: "/UIEX",
+      name: "UIEX",
+      component: UIEX,
     }
   ],
 });

src/pages/main/views/NLP/UIEX.vue

@@ -0,0 +1,31 @@
+<template>
+    <el-row :gutter="20" class="page">
+        <el-col :span="12" class="place">
+            <el-row class="small-title">
+                <h2>通用型文档信息抽取</h2>
+            </el-row>
+            <el-row style="color: gray; font-size: small;">
+                <p>基于OCR、NLP等前沿深度学习算法，提供了文档的识别、要素提取、实体关系提取等功能。 目前为通用型文档信息抽取（0-Shot）
+                    后续可根据需求进行定制化训练N-Shot模型，满足0-Shot不能满足的需求。</p>
+            </el-row>
+            <el-row>
+                <ShowImage :show-src-image=true />
+            </el-row>
+            <el-row style="color: gray; font-size: small;">
+                <h4>支持jpg, png, bmp, pdf等文件格式</h4>
+            </el-row>
+            <PdfPreview />
+        </el-col>
+        <el-col :span="12" class="place">
+            <el-row class="small-title">
+                <h2 style="margin-right: 0;">识别结果展示</h2>
+                <!-- <el-button type="danger" @click="submitBug" disabled>提交bug</el-button> -->
+            </el-row>
+        </el-col>
+    </el-row>
+</template>
+
+<script setup lang="ts">
+import ShowImage from '../../../../components/ShowImage.vue'
+import PdfPreview from '../../../../components/PdfPreview.vue'
+</script>

src/store/Server.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue'
 
 export const useServerStore = defineStore('server', () => {
-  const tmp_ip = "http://192.168.10.116:80"
+  const tmp_ip = ""
   const server_ip = ref("localhost")
   const server_port = ref(":7896")
   const api_dewarp = ref(tmp_ip + "/v1/image_process/dewarp")