feat: orc preview

package.json

@@ -64,6 +64,7 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "lodash-es": "^4.17.21",
+    "md-editor-v3": "^5.3.2",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
@@ -76,7 +77,7 @@
     "vant": "^4.9.17",
     "vditor": "^3.9.6",
     "video.js": "^7.21.5",
-    "vue": "^3.3.8",
+    "vue": "^3.5.13",
     "vue-i18n": "^9.6.5",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.2.5",

src/api/system/pdf/index.ts

@@ -0,0 +1,22 @@
+import { defHttp } from '@/utils/http/axios'
+
+export interface OCRReqVo {
+  file: File | Blob | null
+  msg: string
+}
+
+/**
+ * com.wmyun.module.system.controller.admin.forward.OCRController#OCRinterface
+ * OCR识别
+ * @param data markdown格式
+ */
+export function getOcrResult(data: OCRReqVo) {
+  const formData = new FormData()
+  if (data.file)
+    formData.append('file', data.file)
+
+  formData.append('mag', data.msg)
+  return defHttp.post({ url: '/system/ocr/OCRinterface', data: formData, headers: {
+    'Content-Type': 'multipart/form-data',
+  } })
+}

src/utils/http/axios/index.ts

@@ -259,7 +259,7 @@ const transform: AxiosTransform = {
     // 添加自动重试机制 保险起见 只针对GET请求
     if (config?.requestOptions) {
       const retryRequest = new AxiosRetry()
-      const {isOpenRetry} = config.requestOptions.retryRequest
+      const { isOpenRetry } = config.requestOptions.retryRequest
       config.method?.toUpperCase() === RequestEnum.GET
       && isOpenRetry
       && retryRequest.retry(axiosInstance, error)
@@ -277,7 +277,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // authentication schemes，e.g: Bearer
         // authenticationScheme: 'Bearer',
         authenticationScheme: 'Bearer',
-        timeout: 10 * 1000,
+        timeout: 10 * 60 * 1000,
         // 基础接口地址
         // baseURL: globSetting.apiUrl,
 

src/views/pdf/ocr/index.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Button, Divider, Spin } from 'ant-design-vue'
+import { useFileDialog } from '@vueuse/core'
+import { ref } from 'vue'
+import { MdPreview } from 'md-editor-v3'
+import { getOcrResult } from '@/api/system/pdf'
+import 'md-editor-v3/lib/preview.css'
+
+const { files, open, reset, onChange } = useFileDialog({
+  accept: 'image/*',
+  directory: false,
+})
+
+const ocrResult = ref<string>('')
+const loading = ref<boolean>(false)
+
+onChange(async () => {
+  ocrResult.value = ''
+  loading.value = false
+  if (files.value?.length && files.value?.length > 0) {
+    loading.value = true
+    ocrResult.value = await getOcrResult({
+      file: files.value.item(0),
+      msg: '请识别图片中的文字，结果以markdown格式输出',
+    })
+    loading.value = false
+    reset()
+  }
+})
+
+function handleReset() {
+  reset()
+  ocrResult.value = ''
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="mx-2 mt-4">
+    <Button class="mr-2" type="primary" @click="open()">
+      选择文件
+    </Button>
+    <Button @click="handleReset">
+      重置
+    </Button>
+    <Divider />
+    <div v-if="loading" class="h-300px w-full flex flex-row items-center justify-center">
+      <Spin size="large" />
+    </div>
+    <MdPreview id="md-editor-v3" :model-value="ocrResult" class="px-4 pb-4" />
+  </div>
+</template>