如何通过JSON将HTML5附件传递至后端（附代码补全需求）

首先得提醒你，FileReader是异步操作，不能直接在readAsBinaryString之后就去编码，得等它读取完成的回调事件触发才行。下面是补全后的完整代码，我给你拆解开说明：

var filecont = document.getElementById("idattach").files[0];
if (filecont) {
  var reader = new FileReader();
  // 监听读取完成的回调事件
  reader.onload = function(e) {
    // e.target.result 就是读取到的文件二进制字符串
    var binaryContent = e.target.result;
    // 用浏览器原生方法把二进制字符串转成Base64
    var base64Str = btoa(binaryContent);
    // 封装成后端需要的JSON格式
    var requestData = JSON.stringify({
      attachment: base64Str,
      filename: filecont.name, // 顺便传文件名，后端还原文件时更方便
      fileType: filecont.type
    });
    // 发送到后端的请求逻辑（这里用fetch举例，也可以用XMLHttpRequest）
    fetch('/your-backend-api-path', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: requestData
    })
    .then(res => res.json())
    .then(result => {
      console.log('文件上传成功:', result);
    })
    .catch(err => {
      console.error('上传出错:', err);
    });
  };
  reader.readAsBinaryString(filecont);
}

关键细节拆解： #

• 异步回调的必要性：readAsBinaryString是异步执行的，直接在它后面写编码代码会拿到空值，必须在onload回调里处理读取结果。
• Base64编码：用浏览器原生的btoa()方法就足够处理文本文件的编码（你的accept限制了text/*，完全适配）。
• JSON封装：建议带上文件名和文件类型，后端拿到Base64后，需要这些信息才能正确还原出原文件。
• 请求头设置：发送JSON时必须指定Content-Type: application/json，否则后端可能无法正确解析请求体。

另外给你个备选方案：如果不想处理二进制字符串，可以直接用readAsDataURL，它会直接返回带data:前缀的Base64字符串，只需要去掉前缀即可：

reader.onload = function(e) {
  var dataUrl = e.target.result;
  var base64Str = dataUrl.split(',')[1]; // 去掉类似data:text/plain;base64,的前缀
  // 后续封装JSON和发送请求的逻辑和上面一致
};
reader.readAsDataURL(filecont);

这种方式对非文本文件也更友好，不过你的场景用两种方法都没问题。

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