AI 图片识别组件

概述

AiImageOcr 是一个集成 AI OCR 能力的文件上传组件，支持上传图片、PDF、文档等文件并自动进行 AI 识别，将识别结果填充到表单字段中。

组件路径：web/apps/web-ele/src/components/zq-form/ai-image-ocr/

组件名称：AiImageOcr

功能特性

• 支持多种文件类型：图片、PDF、Word、Excel、文本文件
• AI OCR 识别：基于 qwen-vl-ocr 模型
• 结构化数据提取：支持自定义输出 Schema
• 字段映射：将识别结果自动填充到表单字段
• 预置模板：身份证、营业执照、发票、收据、合同等
• 图片/PDF 预览
• 上传进度显示

Props

属性	类型	默认值	说明
modelValue	string | string[]	-	文件 ID
multiple	boolean	false	是否多选
placeholder	string	国际化文本	占位提示
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
maxSize	number	10	最大文件大小（MB）
height	number	-	组件高度（px）
aiOcrConfig	AiOcrConfig	-	AI OCR 配置
formData	Record<string, any>	-	表单数据（用于字段映射）

AiOcrConfig 配置

interface AiOcrConfig {
  enabled: boolean;              // 是否启用 AI 识别
  templateType: string;          // 模板类型
  acceptFileTypes: string[];     // 接受的文件类型
  outputSchema: OutputField[];   // 输出字段定义
  fieldMapping: FieldMapping[];  // 字段映射
  customPrompt?: string;         // 自定义提示词
}

interface OutputField {
  name: string;        // 字段名
  type: string;        // 字段类型
  description: string; // 字段描述
}

interface FieldMapping {
  source: string;  // OCR 输出字段
  target: string;  // 表单字段
}

模板类型

值	说明
custom	自定义模板
id_card	身份证
business_license	营业执照
invoice	发票
receipt	收据
contract	合同

文件类型

值	说明
image	图片（jpg/png/gif/webp 等）
text	文本文件（txt/md/代码文件等）
pdf	PDF 文件
word	Word 文档
excel	Excel 表格
all	所有文件

Events

事件	参数	说明
update:modelValue	string | string[] | undefined	值更新
change	string | string[] | undefined	值变化
ocr-success	{ rawText: string; extractedData: Record<string, any> | null }	OCR 识别成功
fill-fields	Record<string, any>	填充字段数据

使用示例

基础用法

<template>
  <AiImageOcr v-model="fileId" />
</template>

<script setup>
import { ref } from 'vue';

const fileId = ref('');
</script>

启用 AI 识别

<template>
  <AiImageOcr
    v-model="fileId"
    :ai-ocr-config="ocrConfig"
    @fill-fields="handleFillFields"
  />
</template>

<script setup>
import { ref } from 'vue';

const fileId = ref('');

const ocrConfig = {
  enabled: true,
  templateType: 'invoice',
  acceptFileTypes: ['image', 'pdf'],
  outputSchema: [
    { name: 'invoice_no', type: 'string', description: '发票号码' },
    { name: 'amount', type: 'number', description: '金额' },
    { name: 'date', type: 'string', description: '开票日期' },
  ],
  fieldMapping: [
    { source: 'invoice_no', target: 'invoiceNumber' },
    { source: 'amount', target: 'totalAmount' },
    { source: 'date', target: 'invoiceDate' },
  ],
};

function handleFillFields(data) {
  // data: { invoiceNumber: 'xxx', totalAmount: 100, invoiceDate: '2024-01-01' }
  console.log('填充数据:', data);
}
</script>

自定义提示词

<template>
  <AiImageOcr
    v-model="fileId"
    :ai-ocr-config="{
      enabled: true,
      templateType: 'custom',
      acceptFileTypes: ['image'],
      customPrompt: '请识别图片中的表格数据，提取所有行和列的内容',
    }"
  />
</template>

工作流程

1. 文件上传：用户选择文件，上传到文件管理服务
2. AI 识别：调用 /api/core/file_manager/ocr/recognize 接口
3. 数据提取：根据 outputSchema 结构化提取数据
4. 字段映射：根据 fieldMapping 将数据映射到表单字段
5. 填充表单：触发 fill-fields 事件，由父组件处理填充

与表单设计器集成

在表单设计器中，该组件作为 ai-image-ocr 类型的表单项使用，配置存储在 aiOcrConfig 属性中。

{
  "type": "ai-image-ocr",
  "field": "idCardImage",
  "label": "身份证照片",
  "aiOcrConfig": {
    "enabled": true,
    "templateType": "id_card",
    "acceptFileTypes": ["image"],
    "outputSchema": [...],
    "fieldMapping": [...]
  }
}