u

code/container-ocr/ocr-uniapp/src/pages-sub/upload/index.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { toast } from 'sard-uniapp'
-import { deleteAliyunFileApi, recognizeOcrBoxApi } from '@/request/api'
-import { imageCompress, uploadFileToAliyun } from '@/utils/file'
+import type { UploadFile, UploadFileItem } from 'sard-uniapp'
+import { dialog, isImageUrl, isVideoUrl, toast } from 'sard-uniapp'
+import { aliyunpluploadApi, deleteAliyunFileApi, deleteFileApi, recognizeOcrBoxApi } from '@/request/api'
+import { downloadFile, formatFileSize, getFileExtension, imageCompress, isImage, uploadFileToAliyun } from '@/utils/file'
 
 const boxImage = ref('')
 
@@ -10,10 +11,13 @@ const isError = ref(false)
 const ocrScore = ref('0.00')
 
 const form = ref({
+  b_id: 0,
   boxNumber: '',
   boxImageUrl: '',
 })
 
+const subFileList = ref([])
+
 const otherImages = ref([])
 
 function handleChooseBox() {
@@ -76,8 +80,6 @@ function handleDeleteBoxImage() {
     transparent: false,
   })
 
-  console.log(form.value.boxImageUrl)
-
   deleteAliyunFileApi(form.value.boxImageUrl).then((res) => {
     if (res.success) {
       boxImage.value = ''
@@ -88,6 +90,94 @@ function handleDeleteBoxImage() {
     }
   })
 }
+
+function onItemClick(fileItem: UploadFileItem) {
+  console.log(fileItem)
+  if (!isImageUrl(fileItem.mx_mapfilename) && !isVideoUrl(fileItem.mx_mapfilename)) {
+    downloadFile(fileItem.mx_mapfilename, fileItem.name)
+  }
+}
+
+function beforeRead(file: UploadFile): boolean | Promise<UploadFile> {
+  // 非图片直接允许上传
+  if (!isImage(file.name))
+    return true
+
+  // 图片异步压缩，返回修改后的 UploadFile 对象
+  return imageCompress(file.path).then((res) => {
+    file.path = res.path
+    file.size = res.size
+    return file
+  }).catch((err) => {
+    console.error('图片压缩失败：', err)
+    return file
+  })
+}
+
+async function afterRead(fileItem: UploadFileItem) {
+  fileItem.isUpload = false
+
+  subFileList.value = [...subFileList.value]
+}
+
+function beforeRemove(index: number, fileItem: UploadFileItem): boolean | Promise<void> {
+  console.log(fileItem)
+
+  return new Promise((resolve, reject) => {
+    dialog.confirm({
+      title: '提示',
+      message: `确定删除该张图片吗？`,
+      onConfirm: () => resolve(),
+      onCancel: () => reject(),
+      onClose: () => reject(),
+    })
+  })
+}
+
+function onRemove(index: number, item: UploadFileItem) {
+  console.log(item)
+
+  if (!item.isUpload) {
+    return
+  }
+
+  deleteFileApi(item.b_id).then((res) => {
+    if (res.success) {
+      toast.success('删除成功')
+    }
+  })
+}
+
+async function handleConfirm() {
+  subFileList.value.forEach(async (fileItem, index) => {
+    // 上传到阿里云
+    const res = await uploadFileToAliyun(
+      fileItem.file.path,
+      fileItem.file.name,
+      fileItem.file.type,
+    )
+
+    if (!res.url)
+      throw new Error('上传失败：未获取到文件 URL')
+
+    // 调用后端接口保存文件信息
+    const saveRes = await aliyunpluploadApi({
+      father: form.value.b_id,
+      mx_xh: index,
+      mx_filename: fileItem.file.name,
+      mx_filesize: fileItem.file.size,
+      mx_fileext: getFileExtension(fileItem.file.name),
+      mx_mapfilename: res.url,
+      mx_moduleid: 'b_container',
+      mx_cate_id: '1',
+    })
+
+    if (saveRes.success) {
+      fileItem.isUpload = true
+      fileItem.b_id = saveRes.data
+    }
+  })
+}
 </script>
 
 <template>
@@ -174,8 +264,13 @@ function handleDeleteBoxImage() {
         </view>
         <view class="step-content">
           <sar-upload
-            v-model="otherImages"
+            v-model="subFileList"
             multiple
+            :after-read="afterRead"
+            :before-read="beforeRead"
+            :before-remove="beforeRemove"
+            @item-click="onItemClick"
+            @remove="onRemove"
           />
         </view>
       </view>
@@ -183,7 +278,7 @@ function handleDeleteBoxImage() {
 
     <view class="g3-footer">
       <view class="footer-main">
-        <view class="submit-btn">
+        <view class="submit-btn" @click="handleConfirm">
           确认上传
         </view>
       </view>

code/container-ocr/ocr-uniapp/src/request/api.ts

@@ -13,7 +13,7 @@ export function loginApi(params: LoginParams) {
 }
 
 interface GetaliyunkeyParams {
-  bucket: string
+  bucketName: string
 }
 
 export function getaliyunkeyApi(params: GetaliyunkeyParams) {
@@ -21,11 +21,12 @@ export function getaliyunkeyApi(params: GetaliyunkeyParams) {
 }
 
 interface AliyunpluploadParams {
-  despathfile: string
-  myfilename: string
-  size: string
-  tablename: string
-  sid: string
+  father: number
+  mx_xh: number
+  mx_filename: string
+  mx_filesize: string
+  mx_fileext: string
+  mx_mapfilename: string
   mx_moduleid: string
   mx_cate_id: string
 }
@@ -41,6 +42,14 @@ export function recognizeOcrBoxApi(params: OcrBoxRequest) {
   return httpPost(`/ocr/box`, params)
 }
 
+export function deleteFileApi(id) {
+  return httpPost(`file/delete`, {
+    id,
+    tableName: 'bf_file',
+    bucketName: aliyunBucket,
+  })
+}
+
 export function deleteAliyunFileApi(fileUrl) {
   return httpPost(`/file/deleteAliyunFile`, {
     bucketName: aliyunBucket,

code/container-ocr/ocr-uniapp/src/utils/file.ts

@@ -133,7 +133,7 @@ export async function uploadFileToAliyun(
 ): Promise<AliyunUploadResult> {
   // 获取 OSS 临时上传凭证
   const keyRes = await getaliyunkeyApi({
-    bucket: aliyunBucket,
+    bucketName: aliyunBucket,
   })
   const { accessid, callback, dir, host, policy, signature } = keyRes.data