更新页面

src/components/ExtractionText/index.vue

@@ -16,13 +16,13 @@
         <div class="container">
           <input type="file" id="file-input" accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"/>
           <button @click="chooseFile">选择文件</button>
-          <p id="file-info">未选择文件</p>
+          <p id="file-info">{{ fileText }}</p>
         </div>
   
         <button id="extract-btn" disabled>提取文本</button>
   
         <h3>提取结果：</h3>
-        <div id="result">请先上传文件...</div>
+        <div id="result">{{ content }}</div>
       </div>
       <!-- 图片解析 -->
       <div v-show="active == '图片解析'" v-loading="loading" element-loading-text="模型加载中......">
@@ -30,8 +30,8 @@
           <h1>文件文本提取工具</h1>
           <span title="刷新" class="pointer"  >
             <el-icon color="#0072ff" size="30px" @click="frashJs"><RefreshRight /></el-icon>
-            <el-icon color="#23c044" size="14px" v-if="hasLoadingJS"><CircleCheckFilled /></el-icon>
-            <el-icon color="#e60e0e" size="14px" v-if="!hasLoadingJS"><CircleCloseFilled /></el-icon>
+            <el-icon color="#23c044" size="14px" v-if="hasLoad"><CircleCheckFilled /></el-icon>
+            <el-icon color="#e60e0e" size="14px" v-if="!hasLoad"><CircleCloseFilled /></el-icon>
           </span>
         </div>
         <p>上传文件提取文本内容（支持 .png, .jpg ）</p>
@@ -78,10 +78,13 @@ const props = defineProps({
     default: false
   }
 });
+const content = ref('请先上传文件...')
+const fileText = ref('未选择文件')
+
 const { proxy } = getCurrentInstance();
 const emits = defineEmits(["update:modelValue", "change"]);
 const active = ref('文件解析')
-
+const hasLoad = ref(false)
 const files = ref({})
 const loading = ref(true)
 const linadingImg = ref(false)
@@ -94,32 +97,26 @@ const textStyle = reactive({
   width: "",
   height: ""
 })
-const hasLoadingJS = ref(null) //加载的状态 1 ：成功，2：失败
-
-watch(()=>props.modelValue,val=>{
-  if(val) initDemo();
-},{immediate:true,deep:true})
 
 
 const initDemo = () =>{
-  if(hasLoadingJS.value == null) initPage();
+  loading.value = imgIsLoad ? false : true;
+  hasLoad.value = imgIsLoad ? true : false;
   nextTick(() => {
     const fileInput = document.getElementById("file-input");
-    const fileInfo = document.getElementById("file-info");
     const extractBtn = document.getElementById("extract-btn");
-    const resultDiv = document.getElementById("result");
     let selectedFile = null;
     // 监听文件选择
     fileInput.addEventListener("change", function (e) {
       if (e.target.files.length > 0) {
         selectedFile = e.target.files[0];
-        fileInfo.textContent = `已选择: ${selectedFile.name} (${(
+        fileText.value = `已选择: ${selectedFile.name} (${(
           selectedFile.size / 1024
         ).toFixed(2)} KB)`;
         extractBtn.disabled = false;
       } else {
         selectedFile = null;
-        fileInfo.textContent = "未选择文件";
+        fileText.value = "未选择文件";
         extractBtn.disabled = true;
       }
       if (selectedFile.type == "video/mp4") {
@@ -128,13 +125,11 @@ const initDemo = () =>{
     });
     // 提取文本按钮点击事件
     extractBtn.addEventListener("click", async function () {
-      if (!selectedFile) return (resultDiv.textContent = "请先选择文件");
-      resultDiv.textContent = "正在处理文件...";
+      if (!selectedFile) return (content.value = "请先选择文件");
+      content.value = "正在处理文件...";
       try {
         let text = "";
         const fileType = selectedFile.name.split(".").pop().toLowerCase();
-        console.log(selectedFile);
-        console.log(fileType,'===fileType');
         if (fileType === "txt") {
           // 处理文本文件
           text = await readTextFile(selectedFile);
@@ -144,26 +139,30 @@ const initDemo = () =>{
         } else if (fileType === "docx") {
           // 处理Word文件
           text = await extractTextFromDocx(selectedFile);
-          console.log(text, "===word");
         } else if (["mp4", "mp3", "wav"].includes(fileType)) {
           // 处理mp4,mp3,wav文件
           await start();
           text = "数据加载有点慢，请稍等。。。。";
           setTimeout(() => {
-            resultDiv.textContent = videoText;
+            content.value = videoText;
           }, 2000);
         }else {
           throw new Error("不支持的文件类型");
         }
-        resultDiv.textContent = text || "未提取到文本内容";
+        content.value = text || "未提取到文本内容";
       } catch (error) {
-        resultDiv.textContent = `处理失败: ${error.message}`;
-        console.error(error);
+        content.value = `处理失败: ${error.message}`;
       }
     });
   });
 }
 
+watch(()=>props.modelValue,val=>{
+  if(val) initDemo();
+},{immediate:true,deep:true})
+
+
+
 // 读取文本文件
 function readTextFile(file) {
   return new Promise((resolve, reject) => {
@@ -226,26 +225,18 @@ async function extractTextFromDocx(file) {
   });
 }
 
-/**
- *@Descripttion:图片页面初始化
-*@Author: PengShuai
-*/
-const initPage = async () => {
-  loading.value = true;
-  try {
-    await ocr.init();// 模型初始化
-    proxy.$message({ type: "success",  message: "加载成功" });
-    loading.value = false;
-    hasLoadingJS.value = 1;
-  } catch (err) {
-    proxy.$message({ type: "error",  message: "加载失败，请刷新页面" });
-    loading.value = false;
-    hasLoadingJS.value = 2;
+
+const frashJs = async () =>{
+  if(!imgIsLoad){
+    try {
+      await ocr.init();// 模型初始化
+      imgIsLoad = true;
+      proxy.$message({ type: "success",  message: "加载成功" });
+    } catch (err) {
+      proxy.$message({ type: "error",  message: "加载失败，请刷新页面" });
+      imgIsLoad = false;
+    }
   }
-}
-const frashJs = () =>{
-  if(hasLoadingJS.value == 1) return;
-  initPage()
 }
  /**
  *@Descripttion:图片上传事件
@@ -276,35 +267,30 @@ const getRecognize = async () => {
 
 // 切换标签
 const changeRadio = (val) =>{
-  if(val == '图片解析') if(hasLoadingJS.value == 2) initPage();
-  const resultDiv = document.getElementById("result");
-  resultDiv.textContent = "请先上传文件...";
-  const fileInfo = document.getElementById("file-info");
-  fileInfo.textContent = "选择文件";
+  content.value = "请先上传文件...";
+  fileText.value = "选择文件";
   files.value = {}
   alertText.value = '请先上传文件...';
   texts.value = []
   image.value = ''
+  if(val == '图片解析'){
+    if(!imgIsLoad)  proxy.$message({ type: "error",  message: "加载失败，请刷新页面" });
+  }
 }
 const onComfirm = () => {
-  if(active == '文件解析'){
-    const resultDiv = document.getElementById("result");
-    let obj = {
-      text: resultDiv.textContent
-    };
+  if(active.value == '文件解析'){
+    let obj = { text: content.value };
     emits("change", obj);
   }else{
-    emits("change", {text:texts.value});
+    emits("change", {text:texts.value.join(',\n')});
   }
+  handleClose()
 };
 
 // 关闭
 const handleClose = () => {
-  const resultDiv = document.getElementById("result");
-  resultDiv.textContent = "请先上传文件";
-  const fileInfo = document.getElementById("file-info");
-  fileInfo.textContent = "未选择文件";
-  fileInfo.textContent = "选择文件";
+  content.value = "请先上传文件";
+  fileText.value = "未选择文件";
   files.value = {}
   alertText.value = '请先上传文件...';
   texts.value = []