如何通过FilePond编码插件获取编码文件数据并传递Base64至表单字段

Got it, let's break this down step by step since you already have the encode plugin registered and allowFileEncode={true} configured—half the battle is already won!

方法一：提交表单时实时获取Base64数据 #

Since you've assigned a ref to your FilePond component (this.pond), you can directly access the file(s) and their encoded data when you're ready to submit the form. Here's how:

1. 获取FilePond中的已上传文件
   调用FilePond实例的getFiles()方法获取已上传文件数组，针对你的"passport"字段，大概率是单个文件：

   const uploadedFiles = this.pond.getFiles();
   if (uploadedFiles.length === 0) {
     // 处理未上传文件的情况
     return;
   }
   const passportFile = uploadedFiles[0];
   

2. 提取Base64字符串和元数据
   每个文件对象都有内置方法可获取编码后的数据和MIME类型：

   const passportBase64 = passportFile.getFileEncodeBase64String();
   const passportFileType = passportFile.getFileEncodeType();
   const passportFileName = passportFile.filename; // 可选但对后端处理有用
   

3. 整合其他表单字段并提交
   假设你其他表单字段存在组件state中（比如this.state.userData），把所有数据合并成一个提交 payload 发送到后端：

   // 构建提交数据
   const formPayload = {
     ...this.state.userData, // 你的其他表单字段（姓名、邮箱等）
     passport: {
       base64: passportBase64,
       type: passportFileType,
       name: passportFileName
     }
   };
   
   // 使用fetch提交（也可以用axios）
   fetch('/your-submission-endpoint', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(formPayload),
   })
   .then(res => res.json())
   .then(data => {
     console.log('提交成功！', data);
     // 处理成功逻辑（比如重置表单、显示提示）
   })
   .catch(err => {
     console.error('提交失败：', err);
     // 处理错误
   });
   

方法二：文件添加时提前存储Base64数据 #

如果你想在文件刚上传完成时就存储编码数据（而不是提交时再获取），可以修改你的handleFileUploader方法：

handleFileUploader = (error, file) => {
  if (!error) {
    // 等待编码完成（返回Promise）
    file.getFileEncodeBase64String().then(base64 => {
      this.setState({
        passportBase64: base64,
        passportFileType: file.getFileEncodeType(),
        passportFileName: file.filename
      });
    });
  }
};

之后提交时，直接从state中取出存储的Base64数据，再和其他表单字段合并即可，步骤和方法一的第三步一致。

注意事项 #

• 确保你的后端已经配置好Base64解码逻辑，能将编码数据转换回文件并处理（比如保存到服务器）。
• 如果需要处理多文件上传，只需遍历uploadedFiles数组，收集每个文件的Base64数据即可。

内容的提问来源于stack exchange，提问作者Abayomi Oloyinde