React.js中POST请求JSON接口失败，报错500 JSON解析异常求助

你的React代码POST请求失败的核心原因是FileReader是异步操作，但你调用fetch时没有等待文件读取完成就发送了请求——这时候encodedString还是初始的空字符串，后端收到无效的JSON数据后返回500错误，前端解析非JSON响应时就会抛出JSON.parse异常。

对比Python代码，它是同步读取文件并完成base64编码后才发送请求，所以能正常工作。

方案1：用Promise封装FileReader读取逻辑 #

把文件读取和编码过程封装成Promise，确保编码完成后再发请求：

async function sendRequest() {
  try {
    // 封装FileReader为Promise，确保读取完成后再执行后续逻辑
    const getBase64 = (file) => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
          // readAsDataURL直接返回带前缀的base64字符串，需去掉前缀部分
          const base64String = reader.result.split(',')[1];
          resolve(base64String);
        };
        reader.onerror = reject;
        // 用readAsDataURL替代已废弃的readAsBinaryString
        reader.readAsDataURL(file);
      });
    };

    // 等待文件编码完成
    const encodedString = await getBase64(selectedFile);
    const response = await fetch('http://0.0.0.0:8000/api/convert_pdf/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ pdf_encoded: encodedString })
    });

    // 先判断响应状态，避免错误状态下解析JSON
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log('Request Failed', error);
  }
}

方案2：使用现代API替代FileReader（更简洁） #

利用File.arrayBuffer()直接处理文件，替代老旧的FileReader：

async function sendRequest() {
  try {
    // 读取文件为ArrayBuffer
    const arrayBuffer = await selectedFile.arrayBuffer();
    // 将ArrayBuffer转为base64字符串
    const base64String = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
    
    const response = await fetch('http://0.0.0.0:8000/api/convert_pdf/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ pdf_encoded: base64String })
    });

    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.log('Request Failed', error);
  }
}

• 废弃API：readAsBinaryString已被标记为废弃，优先使用readAsDataURL或arrayBuffer
• 异步等待：必须确保文件编码完成后再发送请求，否则会发送空的或不完整的base64数据
• 错误处理：增加response.ok判断，避免后端返回错误状态码时仍尝试解析JSON

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