RAG（检索增强生成）—— 前端别慌，就是带文件上传的AI聊天

LaoNa1998

492人浏览 · 2026-03-20 14:24:00

LaoNa1998 · 2026-03-20 14:24:00 发布

被 RAG 唬住的前端，像极了第一次见 TS 泛型

作为前前端，我们这辈子怕过啥？

IE 兼容性？CSS 垂直居中？TS 泛型？

直到某天产品说：“我们要做个 RAG 知识库！”

我盯着「检索增强生成」五个大字，大脑直接宕机：

“检索？增强？生成？这仨词单独认识，放一起咋像外星语？”

“是不是要学 Python？是不是要懂机器学习？是不是要重学数学？”

查了 3 篇文章，越看越懵（全是算法、向量、数据库），直到我发现：

RAG 对前端来说，就是 “带文件上传的 AI 聊天”—— 你 80% 的技能都能用，剩下 20% 抄代码就行！

今天就拆穿这个唬人名词，前端视角，零数学，看完就能上手做 Demo。

一、这词在唬谁？

RAG = Retrieval-Augmented Generation（检索增强生成）

翻译成人话：让 AI 先查 “专属资料”，再回答，不瞎编

它唬的就是：

怕数学、怕算法的前端
听到 “数据库” 就躲的页面仔
以为 AI 名词都要深度学习的职场人

但咱前端根本不用怕 —— 这词的核心是 “业务逻辑”，不是 “技术玄学”。

二、前端人话翻译：RAG 到底是啥？

举个前端能秒懂的栗子：

普通 AI 聊天（比如 ChatGPT）：你问 “Vue3 怎么实现响应式？”，它凭 “记忆” 回答（可能过时、可能瞎编）
RAG 聊天（带文件的 AI）：你先上传《Vue3 官方文档.pdf》，再问同样的问题，AI 只看你给的 PDF，精准回答（不瞎编、不跑偏）

再简化：

RAG = 文件上传 + AI 聊天 + 让 AI 只看你的文件说话

你作为前端，负责的就是 “文件上传页面” 和 “AI 聊天页面”，至于 “AI 怎么看文件”—— 后端的活，咱不管！

三、前端到底要懂到啥程度？

不用懂：

向量数据库原理（不用知道 “文字怎么变成数字”）
检索算法（不用知道 “AI 怎么找相关内容”）
生成模型优化（不用知道 “AI 怎么组织语言”）

只要懂 3 件事：

怎么让用户上传文件（PDF/Word/TXT）
怎么调用 RAG 接口（传文件 ID + 用户问题）
怎么展示 AI 的流式回答（打字机效果）

这 3 件事，你做过 IM 聊天、后台管理系统，就等于会 80%！

四、前端要写啥代码？（极简可复制版）

技术栈：Vue3 + TS + Element Plus（React 同理）

核心代码分 3 块：

1. 文件上传（复用你熟悉的 Upload 组件）

<div class="rag-container">
     文件上传区域 -->
    ">
      upload
        class="upload-pdf"
        action="/api/upload"   后端上传接口（开源项目可直接用） -->
        :file-list="fileList"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        accept=".pdf"   -->
        :limit="1"     只能传1个文件 -->
        :before-upload="beforeUpload"
      >
         type="primary" icon="Upload">上传PDF文档</el-button>
        <div class="upload-tip">支持单个PDF文件，大小不超过10MB</div>
      </el-upload>
    </div>

2：聊天界面（独立组件，负责消息展示 + 输入提问）

2. 聊天界面区域（上传文件后才显示） -->
    <div class="chat-section" v-if="fileId">
      列表 -->
       class="chat-list">
        -for="(msg, idx) in chatList" 
          :key="idx" 
          :class="['chat-item', `chat-${msg.type}`]"
        >
          头像 -->
           class="chat-avatar">
            -if="msg.type === 'user'"><User />-icon>
            -icon v-if="msg.type === 'ai'"> /> msg.type === 'system'"><InfoFilled />-icon>
          >
          内容 -->
           class="chat-content">
            {{ msg.content }}
           </div>
      </div>

      提问输入框 -->
      ">
        
          v-model="question"
          placeholder="请输入你的问题（比如：文档里讲了Vue3响应式的哪些实现方式？）"
          :disabled="isLoading"
          @keyup.enter="sendQuestion"   回车发送 -->
        />
         
          type="primary" 
          @click="sendQuestion" 
          :disabled="!question.trim() || isLoading"
          :loading="isLoading"
        >
          -icon v-if="!isLoading"><Send />>
           v-if="isLoading"><Loading />          提问
        </el-button>
      </div>

3. 流式输出（核心新增技能，抄了就能用）

const sendQuestion = async () => {
  const questionVal = question.value.trim();
  if (!questionVal || !fileId.value) return;

  // 状态初始化
  isLoading.value = true;
  // 添加用户消息到列表
  chatList.value.push({ type: 'user', content: questionVal });
  // 占位AI消息（用于逐字拼接）
  const aiMsgIdx = chatList.value.length;
  chatList.value.push({ type: 'ai', content: '' });

  try {
    // 调用RAG流式接口（后端开源项目提供，无需自己写）
    const response = await fetch('/api/rag/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        fileId: fileId.value, // 上传成功的文件ID
        question: questionVal // 用户问题
      })
    });

    // 检查接口响应是否正常
    if (!response.ok) throw new Error('接口请求失败');
    if (!response.body) throw new Error('没有返回数据流');

    // 处理流式响应：逐字读取+拼接
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8'); // 解码二进制流
    let result = '';

    // 循环读取数据流，直到结束
    while (true) {
      const { done, value } = await reader.read();
      if (done) break; // 读取完成，退出循环

      // 逐段解码并拼接结果
      result += decoder.decode(value, { stream: true });
      // 实时更新AI消息内容（打字机效果）
      chatList.value[aiMsgIdx].content = result;
    }
  } catch (err: any) {
    // 错误处理：更新消息为失败提示
    chatList.value[aiMsgIdx].content = `回答失败：${err.message || '未知错误'}，请重试～`;
  } finally {
    // 重置状态
    isLoading.value = false;
    question.value = '';
  }