更新

src/components/ExtractionText/index.vue

@@ -37,7 +37,7 @@
         <p>上传文件提取文本内容（支持 .png, .jpg ）</p>
         <div class="container flex" style="height: 248px;">
           <div class="mr10">
-            <el-upload class="upload-demo" accept=".png,.jpg,jpeg" action="abc" :auto-upload="false" :on-change="onHandleChange" :show-file-list="false">
+            <el-upload :headers="headers" accept=".png,.jpg,jpeg" action="/mosty-api/mosty-base/minio/file/upload" :show-file-list="false" :on-success="handlerSuccess" :on-change="onHandleChange" >
               <el-button size="medium" type="primary">上传图片</el-button>
             </el-upload>
             <p id="file-info">{{ files.name || '未选择文件' }} </p>
@@ -69,15 +69,19 @@
 </template>
 
 <script setup>
+import axios from "axios";
 import * as ocr from "@paddlejs-models/ocr";
 import { drawBox } from "@/utils/ocrUtils";
 import { nextTick,reactive, ref,getCurrentInstance, watch } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
 const props = defineProps({
   modelValue: {
     type: Boolean,
     default: false
   }
 });
+
 const content = ref('请先上传文件...')
 const fileText = ref('未选择文件')
 
@@ -97,7 +101,10 @@ const textStyle = reactive({
   width: "",
   height: ""
 })
-
+const headers = ref({
+  Authorization: store.getters.token
+});
+const fjdz = ref('') //附件地址
 
 const initDemo = () =>{
   loading.value = imgIsLoad ? false : true;
@@ -110,10 +117,9 @@ const initDemo = () =>{
     fileInput.addEventListener("change", function (e) {
       if (e.target.files.length > 0) {
         selectedFile = e.target.files[0];
-        fileText.value = `已选择: ${selectedFile.name} (${(
-          selectedFile.size / 1024
-        ).toFixed(2)} KB)`;
+        fileText.value = `已选择: ${selectedFile.name} (${( selectedFile.size / 1024 ).toFixed(2)} KB)`;
         extractBtn.disabled = false;
+        uploadFile(selectedFile); //上传附件
       } else {
         selectedFile = null;
         fileText.value = "未选择文件";
@@ -225,24 +231,11 @@ async function extractTextFromDocx(file) {
   });
 }
 
-
-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 handlerSuccess = (file) =>{
+  fjdz.value = file.data;
 }
- /**
- *@Descripttion:图片上传事件
-  *@Author: PengShuai
-  *@Date: 2023-12-21 10:49:36
-  */
+
+ /**@Descripttion:图片上传事件*/
 const onHandleChange = (file) => {
   files.value = file;
   image.value = URL.createObjectURL(file.raw);
@@ -251,6 +244,7 @@ const onHandleChange = (file) => {
   setTimeout(() => {
     getRecognize();
   }, 600);
+
 }
 // 图片解析
 const getRecognize = async () => {
@@ -277,12 +271,15 @@ const changeRadio = (val) =>{
     if(!imgIsLoad)  proxy.$message({ type: "error",  message: "加载失败，请刷新页面" });
   }
 }
+
+// 提交
 const onComfirm = () => {
   if(active.value == '文件解析'){
-    let obj = { text: content.value };
-    emits("change", obj);
+    if(content.value == '请先上传文件...') return proxy.$message({ type: "warning",  message: "请解析文件" });
+    emits("change", { text: content.value,fjdz:fjdz.value });
   }else{
-    emits("change", {text:texts.value.join(',\n')});
+    if(texts.value.length == 0) return proxy.$message({ type: "warning",  message: "请解析文件" });
+    emits("change", {text:texts.value.join(',\n'),fjdz:fjdz.value});
   }
   handleClose()
 };
@@ -299,6 +296,36 @@ const handleClose = () => {
   emits("update:modelValue", false);
 };
 
+// 上传附件
+const uploadFile = (file) =>{
+  let formData = new FormData();
+  formData.append("file", file);
+  let token = localStorage.getItem('token');
+  axios({
+    method: 'post',
+    url: '/mosty-api/mosty-base/minio/file/upload',
+    data:formData,
+    headers: { "Content-type": "multipart/form-data",'Authorization': token }
+  }).then( (res) => {
+    fjdz.value = res.data ?  res.data.data : null;
+  })
+}
+
+
+// 刷新js
+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 chooseFile = () => {
   document.getElementById("file-input").click();
 };