求助：如何将HTML表单文件转Base64后以JSON发送至Servlet

我帮你分析下原代码里的几个核心问题，然后给你修复后的完整实现：

原代码的问题点 #

• FileReader是异步操作，你用全局变量data存储结果的话，很可能在你准备发送请求时，文件还没读取完成，导致data为空。
• reader.onerror里的console拼写错误（你写的cons...），会导致错误信息无法正常输出。
• 缺少将Base64转为JSON并发送到Servlet的完整逻辑。
• 全局变量data容易引发作用域混乱，不建议使用。

修复后的完整实现 #

首先是HTML部分（补全你可能缺的表单结构） #

<form id="fileUploadForm">
  <input type="file" id="fileId" accept="*/*">
  <button type="button" onclick="uploadToServlet()">上传文件</button>
</form>

然后是JavaScript部分 #

// 封装文件转Base64的异步函数，用Promise处理更可靠
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    // 读取文件为DataURL（也就是Base64编码格式）
    reader.readAsDataURL(file);
    
    reader.onload = function() {
      // 读取成功，返回Base64结果（注意结果前缀包含"data:文件类型;base64,"）
      resolve(reader.result);
    };
    
    reader.onerror = function(error) {
      // 修复console拼写错误，完善错误提示
      console.error('文件读取失败:', error);
      reject(error);
    };
  });
}

// 上传到Servlet的主函数，用async/await简化异步流程
async function uploadToServlet() {
  const fileInput = document.getElementById('fileId');
  const selectedFile = fileInput.files[0];
  
  // 先校验是否选择了文件
  if (!selectedFile) {
    alert('请先选择要上传的文件哦！');
    return;
  }

  try {
    // 等待文件读取完成，拿到Base64编码
    const base64Content = await getBase64(selectedFile);
    
    // 构造要发送的JSON数据，可额外携带文件名、类型等信息
    const requestJson = JSON.stringify({
      fileName: selectedFile.name,
      fileType: selectedFile.type,
      base64Data: base64Content
    });

    // 发送POST请求到你的Servlet地址
    const response = await fetch('/你的Servlet路径', {
      method: 'POST',
      headers: {
        // 告诉服务器请求体是JSON格式
        'Content-Type': 'application/json'
      },
      body: requestJson
    });

    // 处理响应结果
    if (response.ok) {
      const responseText = await response.text();
      console.log('文件上传成功！服务器返回:', responseText);
      alert('文件上传成功啦！');
    } else {
      console.error('上传失败，服务器状态码:', response.status);
      alert('文件上传失败，请稍后重试～');
    }
  } catch (error) {
    console.error('上传过程出现错误:', error);
    alert('上传出错啦，请检查文件是否合法！');
  }
}

额外提醒（Servlet端注意事项） #

• 你的Servlet需要配置支持接收application/json格式的请求，比如在doPost方法里用request.getReader()读取JSON字符串，再解析成对象。
• Base64编码会让文件体积增大约30%，如果是大文件（比如超过10MB），更推荐用FormData直接上传二进制文件，效率更高。
• 如果遇到请求大小限制的问题，需要调整Servlet容器（比如Tomcat）的最大请求大小配置。

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