Home Explore Help
Register Sign In
Others
/
DocumentAIKit
4
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

[web_demo] 支持文件拖拽上传

yanxin 1 year ago
parent
c4052b8d96
commit
13e33cf4e6
7 changed files with 267 additions and 293 deletions
Unified View Show Diff Stats
  1. 1 1
      src/dist/assets/index-46046f92.css
  2. 82 82
      src/dist/assets/index-b6811d62.js
  3. 2 2
      src/dist/index.html
  4. 53 54
      src/pages/main/views/Detection/LayoutAnalysis.vue
  5. 38 44
      src/pages/main/views/ImageProcess/magicColor.vue
  6. 52 60
      src/pages/main/views/Recognize/ocr.vue
  7. 39 50
      src/pages/main/views/Recognize/tableRec.vue

File diff suppressed because it is too large
+ 1 - 1
src/dist/assets/index-46046f92.css


File diff suppressed because it is too large
+ 82 - 82
src/dist/assets/index-b6811d62.js


+ 2 - 2
src/dist/index.html
View File 

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

+ 53 - 54
src/pages/main/views/Detection/LayoutAnalysis.vue
View File 

@@ -11,10 +11,18 @@
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
       <div class="common-layout">
 
       <div class="common-layout">
 
-        <el-container>
 
-          <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
 
-          <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
-        </el-container>
 
+        <el-upload class="upload-demo" drag :before-upload="beforeUpload" multiple>
 
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
 
+          <div class="el-upload__text">
 
+            Drop file here or <em>click to upload</em>
 
+          </div>
 
+          <template #tip>
 
+            <div class="el-upload__tip">
 
+              {{ fileName }}
 
+            </div>
 
+          </template>
 
+        </el-upload>
 
+        <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
       </div>
 
       </div>
 
       <div v-show="is_pdf">
 
       <div v-show="is_pdf">
 
         <el-row>
 
         <el-row>
 
@@ -81,6 +89,7 @@ import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 import {
 
 import {
 
   ArrowLeft,
 
   ArrowLeft,
 
   ArrowRight,
 
   ArrowRight,
 
+  UploadFilled
 
 } from '@element-plus/icons-vue'
 
 } from '@element-plus/icons-vue'
 
 
 
 import { storeToRefs } from 'pinia'
 
 import { storeToRefs } from 'pinia'
 
@@ -99,6 +108,8 @@ const is_pdf = ref(false);
 
 const pdf_page = ref(1);
 
 const pdf_page = ref(1);
 
 const pdf_img: any = ref("")
 
 const pdf_img: any = ref("")
 
 
 
+const input_file = ref(null as unknown as File)
 
+
 
 const state = reactive({
 
 const state = reactive({
 
   source: "", //预览pdf文件地址
 
   source: "", //预览pdf文件地址
 
   pageNum: 1, //当前页面
 
   pageNum: 1, //当前页面
 
@@ -210,7 +221,7 @@ async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
 
 let loading = ref(false)
 
 let loading = ref(false)
 
 let show_predict = ref(false)
 
 let show_predict = ref(false)
 
 let predictTime = ref(0)
 
 let predictTime = ref(0)
 
-const fileName = ref(null);
 
+const fileName = ref(null as unknown as string);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const img_canvas = ref(null as unknown as HTMLCanvasElement);
 
 const img_canvas = ref(null as unknown as HTMLCanvasElement);
 
 let figureSelectedItem = ref(-1)
 
 let figureSelectedItem = ref(-1)
 
@@ -238,53 +249,45 @@ onMounted(async () => {
 
   img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
 
   img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
 
 });
 
 });
 
 
 
-const uploadImg = () => {
 
-  /**
 
-   * 这里由于操作是绑定在 el-input 上；因此需要在内部重新获取 input 再拿到 file
 
-   */
 
-  const reader = new FileReader();
 
-  // 用于展示
 
+const beforeUpload = (file: File): boolean | Promise<boolean> => {
 
+  if (fa_canvas != null) {
 
+    fa_canvas.dispose();
 
+    fa_canvas = null;
 
+  }
 
+
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
 
 
-  try {
 
-    const file = inputElement.files![0];
 
-    reader.onload = () => {
 
-      const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
-      fa_canvas ? fa_canvas.clear() : 0;
 
-      if (post_ == ".pdf") {
 
-        state.pageNum = 1;
 
-        state.source = URL.createObjectURL(file);
 
-        is_pdf.value = true
 
-        loadingTask = createLoadingTask(state.source);
 
-        getPdfImage(state.pageNum);
 
-      } else
 
-        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
-          showImg.src = URL.createObjectURL(file);
 
-          showImg.onload = () => {
 
-            canvas.value.width = showImg.width;
 
-            canvas.value.height = showImg.height;
 
-            fa_canvas = new fabric.Canvas(canvas.value);
 
-            figure_rects.splice(0)
 
-            table_rects.splice(0)
 
-            figureSelectedItem.value = -1;
 
-            tableSelectedItem.value = -1;
 
-          }
 
-          is_pdf.value = false
 
-        } else {
 
-          alert('不支持的文件格式！')
 
-          fileName.value = null
 
-        }
 
-    };
 
-    reader.readAsDataURL(file);
 
-  } catch (err) {
 
-    console.error(err);
 
-  }
 
+  const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
+  if (post_ == ".pdf") {
 
+    state.pageNum = 1;
 
+    state.source = URL.createObjectURL(file);
 
+    is_pdf.value = true
 
+    loadingTask = createLoadingTask(state.source);
 
+    getPdfImage(state.pageNum);
 
+  } else
 
+    if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
+      showImg.src = URL.createObjectURL(file);
 
+      input_file.value = file
 
+      showImg.onload = () => {
 
+        canvas.value.width = showImg.width;
 
+        canvas.value.height = showImg.height;
 
+        fa_canvas = new fabric.Canvas(canvas.value);
 
+        figure_rects.splice(0)
 
+        table_rects.splice(0)
 
+        figureSelectedItem.value = -1;
 
+        tableSelectedItem.value = -1;
 
+      }
 
+      is_pdf.value = false
 
+    } else {
 
+      alert('不支持的文件格式！')
 
+      fileName.value = ''
 
+    }
 
+  fileName.value = file.name
 
+
 
   if (show_predict.value === true)
 
   if (show_predict.value === true)
 
     show_predict.value = !show_predict.value;
 
     show_predict.value = !show_predict.value;
 
-};
 
+  return true
 
+}
 
 
 
 type RectWithId = fabric.Rect & { id: number };
 
 type RectWithId = fabric.Rect & { id: number };
 
 
 
@@ -306,7 +309,7 @@ function CreateRect(canvas: any, i: number, left: number, top: number, width: nu
 
 }
 
 }
 
 
 
 const predict = async () => {
 
 const predict = async () => {
 
-  if (fileName.value == undefined) {
 
+  if (fileName.value == undefined || fileName.value == '') {
 
     alert('请上传图片！')
 
     alert('请上传图片！')
 
     return;
 
     return;
 
   }
 
   }
 
@@ -316,10 +319,6 @@ const predict = async () => {
 
   table_rects.splice(0)
 
   table_rects.splice(0)
 
 
 
   const img = document.getElementById("show-img") as HTMLImageElement;
 
   const img = document.getElementById("show-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
-  const file = inputElement.files![0];
 
 
 
   loading.value = !loading.value
 
   loading.value = !loading.value
 
   var data = new FormData();
 
   var data = new FormData();
 
@@ -379,7 +378,7 @@ const predict = async () => {
 
       });
 
       });
 
     })
 
     })
 
   } else {
 
   } else {
 
-    data.append('image', file);
 
+    data.append('image', input_file.value);
 
 
 
     Detection(api, data).then(res => {
 
     Detection(api, data).then(res => {
 
       console.log(res.code)
 
       console.log(res.code)

+ 38 - 44
src/pages/main/views/ImageProcess/magicColor.vue
View File 

@@ -11,10 +11,18 @@
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
       <div class="common-layout">
 
       <div class="common-layout">
 
-        <el-container>
 
-          <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
 
-          <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
-        </el-container>
 
+        <el-upload class="upload-demo" drag :before-upload="beforeUpload" multiple>
 
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
 
+          <div class="el-upload__text">
 
+            Drop file here or <em>click to upload</em>
 
+          </div>
 
+          <template #tip>
 
+            <div class="el-upload__tip">
 
+              {{ fileName }}
 
+            </div>
 
+          </template>
 
+        </el-upload>
 
+        <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
       </div>
 
       </div>
 
       <div v-show="is_pdf">
 
       <div v-show="is_pdf">
 
         <el-row>
 
         <el-row>
 
@@ -72,6 +80,7 @@ import { onMounted } from "vue";
 
 import {
 
 import {
 
   ArrowLeft,
 
   ArrowLeft,
 
   ArrowRight,
 
   ArrowRight,
 
+  UploadFilled
 
 } from '@element-plus/icons-vue'
 
 } from '@element-plus/icons-vue'
 
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 
 
@@ -185,63 +194,48 @@ async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
 
 }
 
 }
 
 
 
 let loading = ref(false)
 
 let loading = ref(false)
 
-const fileName = ref(null);
 
+const fileName = ref(null as unknown as string);
 
 let bugId = ref("");
 
 let bugId = ref("");
 
 let predictTime = ref(0)
 
 let predictTime = ref(0)
 
 const is_pdf = ref(false);
 
 const is_pdf = ref(false);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const res_image: any = ref();
 
 const res_image: any = ref();
 
 
 
+const input_file = ref(null as unknown as File)
 
+
 
 onMounted(async () => {
 
 onMounted(async () => {
 
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
 
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
 
   res_image.value = document.getElementById("res-img") as HTMLImageElement;
 
   res_image.value = document.getElementById("res-img") as HTMLImageElement;
 
 });
 
 });
 
 
 
-const uploadImg = () => {
 
-  const reader = new FileReader();
 
+const beforeUpload = (file: File): boolean | Promise<boolean> => {
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
-  const predictImg = document.getElementById("predict-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
 
 
-  try {
 
-    const file = inputElement.files![0];
 
-    reader.onload = () => {
 
-      const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
-      if (post_ == ".pdf") {
 
-        state.pageNum = 1;
 
-        // state.scale = 4;
 
-        state.source = URL.createObjectURL(file);
 
-        is_pdf.value = true
 
-        loadingTask = createLoadingTask(state.source);
 
-        getPdfImage(state.pageNum);
 
-      } else
 
-        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
-          showImg.src = URL.createObjectURL(file);
 
-          is_pdf.value = false
 
-        } else {
 
-          alert('不支持的文件格式！')
 
-          fileName.value = null
 
-        }
 
-    };
 
-    reader.readAsDataURL(file);
 
-  } catch (err) {
 
-    console.error(err);
 
-  }
 
-};
 
+  const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
+  if (post_ == ".pdf") {
 
+    state.pageNum = 1;
 
+    state.source = URL.createObjectURL(file);
 
+    is_pdf.value = true
 
+    loadingTask = createLoadingTask(state.source);
 
+    getPdfImage(state.pageNum);
 
+  } else
 
+    if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
+      showImg.src = URL.createObjectURL(file);
 
+      input_file.value = file;
 
+      is_pdf.value = false
 
+    } else {
 
+      alert('不支持的文件格式！')
 
+      fileName.value = ''
 
+    }
 
+  fileName.value = file.name
 
+  return true
 
+}
 
 
 
 const predict = () => {
 
 const predict = () => {
 
-  if (fileName.value == undefined) {
 
+  if (fileName.value == undefined || fileName.value == '') {
 
     alert('请上传图片！')
 
     alert('请上传图片！')
 
     return;
 
     return;
 
   }
 
   }
 
-  const showImg = document.getElementById("show-img") as HTMLImageElement;
 
-  const predictImg = document.getElementById("predict-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
-  const file = inputElement.files![0];
 
 
 
   loading.value = !loading.value
 
   loading.value = !loading.value
 
   var data = new FormData();
 
   var data = new FormData();
 
@@ -261,7 +255,7 @@ const predict = () => {
 
       });
 
       });
 
     })
 
     })
 
   } else {
 
   } else {
 
-    data.append('image', file);
 
+    data.append('image', input_file.value);
 
 
 
     IMMagicColor(api, data).then(res => {
 
     IMMagicColor(api, data).then(res => {
 
       res_image.value.src = res.data.image
 
       res_image.value.src = res.data.image

+ 52 - 60
src/pages/main/views/Recognize/ocr.vue
View File 

@@ -11,15 +11,21 @@
 
       <el-row style="color: gray; font-size: small;">
 
       <el-row style="color: gray; font-size: small;">
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
-      <el-row>
 
-        <div class="common-layout">
 
-          <el-container>
 
-            <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
 
-            <OcrLangList />
 
-            <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
-          </el-container>
 
-        </div>
 
-      </el-row>
 
+      <div class="common-layout">
 
+        <el-upload class="upload-demo" drag :before-upload="beforeUpload" multiple>
 
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
 
+          <div class="el-upload__text">
 
+            Drop file here or <em>click to upload</em>
 
+          </div>
 
+          <template #tip>
 
+            <div class="el-upload__tip">
 
+              {{ fileName }}
 
+            </div>
 
+          </template>
 
+        </el-upload>
 
+        <OcrLangList />
 
+        <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
+      </div>
 
       <div v-show="is_pdf">
 
       <div v-show="is_pdf">
 
         <el-row>
 
         <el-row>
 
           <el-button-group>
 
           <el-button-group>
 
@@ -94,6 +100,7 @@ import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
 
 import {
 
 import {
 
   ArrowLeft,
 
   ArrowLeft,
 
   ArrowRight,
 
   ArrowRight,
 
+  UploadFilled
 
 } from '@element-plus/icons-vue'
 
 } from '@element-plus/icons-vue'
 
 import { useServerIpStore } from '../../../../store/ServerIp';
 
 import { useServerIpStore } from '../../../../store/ServerIp';
 
 import { useServerPortStore } from '../../../../store/ServerPort';
 
 import { useServerPortStore } from '../../../../store/ServerPort';
 
@@ -234,7 +241,7 @@ const { ocr_lang } = storeToRefs(ol);
 
 let loading = ref(false)
 
 let loading = ref(false)
 
 let show_predict = ref(false)
 
 let show_predict = ref(false)
 
 let predictTime = ref(0)
 
 let predictTime = ref(0)
 
-const fileName = ref(null);
 
+const fileName = ref(null as unknown as string);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const canvas = ref(null as unknown as HTMLCanvasElement);
 
 const img_canvas = ref(null as unknown as HTMLCanvasElement);
 
 const img_canvas = ref(null as unknown as HTMLCanvasElement);
 
 
 
@@ -251,6 +258,8 @@ const json_result = ref("");
 
 
 
 const { toClipboard } = useClipboard()
 
 const { toClipboard } = useClipboard()
 
 
 
+const input_file = ref(null as unknown as File)
 
+
 
 interface iRect {
 
 interface iRect {
 
   left: number,
 
   left: number,
 
   top: number,
 
   top: number,
 
@@ -265,55 +274,42 @@ onMounted(async () => {
 
   img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
 
   img_canvas.value = document.getElementById("img_canvas") as HTMLCanvasElement;
 
 });
 
 });
 
 
 
-const uploadImg = () => {
 
-  /**
 
-   * 这里由于操作是绑定在 el-input 上；因此需要在内部重新获取 input 再拿到 file
 
-   */
 
-  const reader = new FileReader();
 
-  // 用于展示
 
+const beforeUpload = (file: File): boolean | Promise<boolean> => {
 
+  if (fa_canvas != null) {
 
+    fa_canvas.dispose();
 
+    fa_canvas = null;
 
+  }
 
+
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
 
 
-  try {
 
-    const file = inputElement.files![0];
 
-    reader.onload = () => {
 
-      const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
-      if (fa_canvas && typeof fa_canvas.dispose === 'function') {
 
-        fa_canvas.dispose();
 
-        fa_canvas = null;
 
+  const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
+  if (post_ == ".pdf") {
 
+    state.pageNum = 1;
 
+    state.source = URL.createObjectURL(file);
 
+    is_pdf.value = true
 
+    loadingTask = createLoadingTask(state.source);
 
+    getPdfImage(state.pageNum);
 
+  } else
 
+    if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
+      showImg.src = URL.createObjectURL(file);
 
+      input_file.value = file;
 
+      showImg.onload = () => {
 
+        canvas.value.width = showImg.width;
 
+        canvas.value.height = showImg.height;
 
+        fa_canvas = new fabric.Canvas(canvas.value);
 
+        rects.splice(0)
 
+        selectedItem.value = -1;
 
       }
 
       }
 
-      if (post_ == ".pdf") {
 
-        state.pageNum = 1;
 
-        // state.scale = 4;
 
-        state.source = URL.createObjectURL(file);
 
-        is_pdf.value = true
 
-        loadingTask = createLoadingTask(state.source);
 
-        getPdfImage(state.pageNum);
 
-      } else
 
-        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
-          showImg.src = URL.createObjectURL(file);
 
-          showImg.onload = () => {
 
-            canvas.value.width = showImg.width;
 
-            canvas.value.height = showImg.height;
 
-            fa_canvas = new fabric.Canvas(canvas.value);
 
-            rects.splice(0)
 
-            selectedItem.value = -1;
 
-          }
 
-          is_pdf.value = false
 
-        } else {
 
-          alert('不支持的文件格式！')
 
-          fileName.value = null
 
-        }
 
-    };
 
-    reader.readAsDataURL(file);
 
-  } catch (err) {
 
-    console.error(err);
 
-  }
 
+      is_pdf.value = false
 
+    } else {
 
+      alert('不支持的文件格式！')
 
+      fileName.value = ''
 
+    }
 
+  fileName.value = file.name
 
   if (show_predict.value === true)
 
   if (show_predict.value === true)
 
     show_predict.value = !show_predict.value;
 
     show_predict.value = !show_predict.value;
 
-};
 
+  return true
 
+}
 
 
 
 type RectWithId = fabric.Rect & { id: number };
 
 type RectWithId = fabric.Rect & { id: number };
 
 
 
@@ -348,7 +344,7 @@ function CreateRect(canvas: any, i: number, left: number, top: number, width: nu
 
 }
 
 }
 
 
 
 const predict = async () => {
 
 const predict = async () => {
 
-  if (fileName.value == undefined) {
 
+  if (fileName.value == undefined || fileName.value == '') {
 
     alert('请上传图片！')
 
     alert('请上传图片！')
 
     return;
 
     return;
 
   }
 
   }
 
@@ -359,10 +355,6 @@ const predict = async () => {
 
   rects.splice(0)
 
   rects.splice(0)
 
 
 
   const img = document.getElementById("show-img") as HTMLImageElement;
 
   const img = document.getElementById("show-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
-  const file = inputElement.files![0];
 
 
 
   loading.value = !loading.value
 
   loading.value = !loading.value
 
   var data = new FormData();
 
   var data = new FormData();
 
@@ -408,7 +400,7 @@ const predict = async () => {
 
       });
 
       });
 
     })
 
     })
 
   } else {
 
   } else {
 
-    data.append('image', file);
 
+    data.append('image', input_file.value);
 
 
 
     OcrRec(api, data).then(res => {
 
     OcrRec(api, data).then(res => {
 
       console.log(res.code)
 
       console.log(res.code)

+ 39 - 50
src/pages/main/views/Recognize/tableRec.vue
View File 

@@ -12,11 +12,19 @@
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
         <h4>支持jpg, png, bmp, pdf等文件格式</h4>
 
       </el-row>
 
       </el-row>
 
       <div class="common-layout">
 
       <div class="common-layout">
 
-        <el-container>
 
-          <el-input type="file" v-model="fileName" @change="uploadImg"></el-input>
 
-          <OcrLangList />
 
-          <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
-        </el-container>
 
+        <el-upload class="upload-demo" drag :before-upload="beforeUpload" multiple>
 
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
 
+          <div class="el-upload__text">
 
+            Drop file here or <em>click to upload</em>
 
+          </div>
 
+          <template #tip>
 
+            <div class="el-upload__tip">
 
+              {{ fileName }}
 
+            </div>
 
+          </template>
 
+        </el-upload>
 
+        <OcrLangList />
 
+        <el-button type="primary" @click="predict" :loading="loading">Predict</el-button>
 
       </div>
 
       </div>
 
       <div v-show="is_pdf">
 
       <div v-show="is_pdf">
 
         <el-row>
 
         <el-row>
 
@@ -85,6 +93,7 @@ import { useBugIdStore } from '../../../../store/BugID';
 
 import {
 
 import {
 
   ArrowLeft,
 
   ArrowLeft,
 
   ArrowRight,
 
   ArrowRight,
 
+  UploadFilled
 
 } from '@element-plus/icons-vue'
 
 } from '@element-plus/icons-vue'
 
 import { useServerIpStore } from '../../../../store/ServerIp';
 
 import { useServerIpStore } from '../../../../store/ServerIp';
 
 import { useServerPortStore } from '../../../../store/ServerPort';
 
 import { useServerPortStore } from '../../../../store/ServerPort';
 
@@ -113,7 +122,7 @@ const state = reactive({
 
 
 
 let loading = ref(false)
 
 let loading = ref(false)
 
 let predictTime = ref(0)
 
 let predictTime = ref(0)
 
-const fileName = ref(null);
 
+const fileName = ref(null as unknown as string);
 
 const pdf_page = ref(1);
 
 const pdf_page = ref(1);
 
 
 
 const is_pdf = ref(false);
 
 const is_pdf = ref(false);
 
@@ -129,52 +138,37 @@ let htmlArr: any = ref([])
 
 
 
 let loadingTask: any;
 
 let loadingTask: any;
 
 
 
+const input_file = ref(null as unknown as File)
 
+
 
 onMounted(async () => {
 
 onMounted(async () => {
 
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
 
   canvas.value = document.getElementById("canvas") as HTMLCanvasElement;
 
 });
 
 });
 
 
 
-const uploadImg = () => {
 
-  /**
 
-   * 这里由于操作是绑定在 el-input 上；因此需要在内部重新获取 input 再拿到 file
 
-   */
 
-  const reader = new FileReader();
 
-  // 用于展示
 
+const beforeUpload = (file: File): boolean | Promise<boolean> => {
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
   const showImg = document.getElementById("show-img") as HTMLImageElement;
 
-  // 用于识别
 
-  const rawImg = document.getElementById("raw-img") as HTMLImageElement;
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
 
 
-  try {
 
-    const file = inputElement.files![0];
 
-    reader.onload = () => {
 
-      const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
-      if (post_ == ".pdf") {
 
-        state.pageNum = 1;
 
-        // state.scale = 4;
 
-        state.source = URL.createObjectURL(file);
 
-        is_pdf.value = true
 
-        loadingTask = createLoadingTask(state.source);
 
-        getPdfImage(state.pageNum);
 
-      } else
 
-        if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
-          showImg.src = URL.createObjectURL(file);
 
-          rawImg.src = URL.createObjectURL(file);
 
-          is_pdf.value = false
 
-        } else {
 
-          alert('不支持的文件格式！')
 
-          fileName.value = null
 
-        }
 
-    };
 
-    reader.readAsDataURL(file);
 
-  } catch (err) {
 
-    console.error(err);
 
-  }
 
-};
 
+  const post_ = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();
 
+  if (post_ == ".pdf") {
 
+    state.pageNum = 1;
 
+    state.source = URL.createObjectURL(file);
 
+    is_pdf.value = true
 
+    loadingTask = createLoadingTask(state.source);
 
+    getPdfImage(state.pageNum);
 
+  } else
 
+    if (post_ == ".jpg" || post_ == ".png" || post_ == ".bmp" || post_ == ".jpeg") {
 
+      showImg.src = URL.createObjectURL(file);
 
+      input_file.value = file;
 
+      is_pdf.value = false
 
+    } else {
 
+      alert('不支持的文件格式！')
 
+      fileName.value = ''
 
+    }
 
+  fileName.value = file.name
 
+  return true
 
+}
 
 
 
 const predict = async () => {
 
 const predict = async () => {
 
-  if (fileName.value == undefined) {
 
+  if (fileName.value == undefined || fileName.value == '') {
 
     alert('请上传图片！')
 
     alert('请上传图片！')
 
     return;
 
     return;
 
   }
 
   }
 
@@ -183,11 +177,6 @@ const predict = async () => {
 
     return;
 
     return;
 
   }
 
   }
 
 
 
-  const inputElement = document
 
-    .getElementsByClassName("el-input")[0]
 
-    .getElementsByTagName("input")[0];
 
-  const file = inputElement.files![0];
 
-
 
   loading.value = true
 
   loading.value = true
 
 
 
   var data = new FormData();
 
   var data = new FormData();
 
@@ -221,7 +210,7 @@ const predict = async () => {
 
     })
 
     })
 
   } else {
 
   } else {
 
     // console.log(file)
 
     // console.log(file)
 
-    data.append('image', file);
 
+    data.append('image', input_file.value);
 
     TableRec(api, data).then(res => {
 
     TableRec(api, data).then(res => {
 
       console.log(api)
 
       console.log(api)
 
       bug_id.value = res.response_id;
 
       bug_id.value = res.response_id;