PrimeReact FileUpload：如何将选中文件路径传入createReadStream？

原代码的核心问题是误用了Node.js的fs.createReadStream——浏览器环境无法直接访问本地文件路径，也不支持fs模块。PrimeReact FileUpload在浏览器中返回的是标准Web API的File对象，直接用这个对象就能对接Affinda API，无需本地文件路径。

解决方案步骤 #

• 移除Node.js的fs模块依赖，浏览器环境不需要它
• 删掉FileUpload组件的url属性，避免组件自动发起上传请求（我们要手动调用Affinda API）
• 通过FileUpload的事件获取用户选中的File对象，推荐用onSelect提前保存或在onUpload中直接读取
• 将File对象直接传入client.createResume的file参数，Affinda的JS SDK原生支持浏览器端的File/Blob对象

修改后的完整代码 #

import { useRef, useState } from "react";
import { Toast } from "primereact/toast";
import { FileUpload } from "primereact/fileupload";
import { Tooltip } from "primereact/tooltip";
import { AffindaCredential, AffindaAPI } from "@affinda/affinda";

export const FileUploadCv = () => {
  const toast = useRef(null);
  const [selectedFiles, setSelectedFiles] = useState([]);
  
  // 建议把Token存到环境变量，不要硬编码
  const credential = new AffindaCredential(process.env.REACT_APP_AFFINDA_TOKEN);
  const client = new AffindaAPI(credential);

  // 选中文件时保存到状态
  const onFileSelect = (event) => {
    setSelectedFiles(event.files);
  };

  const onUpload = () => {
    if (selectedFiles.length === 0) {
      toast.current.show({ severity: 'warn', summary: '提示', detail: '请先选择文件' });
      return;
    }

    // 处理第一个文件（支持多文件的话可循环遍历selectedFiles）
    const file = selectedFiles[0];
    toast.current.show({ severity: 'info', summary: '处理中', detail: '正在解析简历' });

    client.createResume({ file: file })
      .then((result) => {
        toast.current.show({ severity: 'success', summary: '成功', detail: '简历解析完成' });
        console.log("解析结果:", result);
      })
      .catch((err) => {
        toast.current.show({ severity: 'error', summary: '失败', detail: '简历解析出错' });
        console.error("错误信息:", err);
      });
  };

  return (
    <div>
      <Toast ref={toast}></Toast>
      <Tooltip target=".custom-choose-btn" content="选择文件" position="bottom" />
      <Tooltip target=".custom-upload-btn" content="上传解析" position="bottom" />
      <Tooltip target=".custom-cancel-btn" content="清空文件" position="bottom" />
      
      <div className="card">
        <FileUpload
          name="resume-files"
          onSelect={onFileSelect}
          onUpload={onUpload}
          multiple={false} // 单份简历设为false，多份设为true并循环处理
          accept=".pdf, .doc, .docx"
          emptyTemplate={<p className="m-0">拖拽文件到此处，或点击选择文件</p>}
          chooseLabel="选择文件"
          uploadLabel="开始解析"
          cancelLabel="清空"
        />
      </div>
    </div>
  );
};

关键修改说明 #

1. 移除fs依赖：彻底删除浏览器不支持的Node.js文件系统模块
2. 状态管理文件：用useState保存选中的文件，方便后续API调用时获取
3. 取消自动上传：删除url属性，避免组件和手动API调用冲突
4. 直接传入File对象：Affinda SDK支持浏览器端File对象，无需转换为Node.js的ReadStream
5. 优化用户反馈：增加无文件提示、处理中状态，提升交互体验
6. 敏感信息保护：把硬编码的Token换成环境变量，避免泄露

内容的提问来源于stack exchange，提问作者Paweł Ciszewski