如何将input type=file文件转为二进制存储到SQL Server及FileReader使用问题

1. 为什么无法获取readAsBinaryString的返回值 #

FileReader的所有读取方法都是异步执行的，readAsBinaryString()本身没有返回值，你当前写法fileToSave = reader.readAsBinaryString(...)无法拿到读取结果，文件内容读取完成后只会存放在reader.result属性中，必须在reader.onload回调函数内处理或存储这个值。

另外补充你问的第二个问题：FileReader读取的是用户选中的实际文件本身的内容，浏览器出于沙箱安全限制，前端JS默认无法获取本地文件的真实完整路径，也不会只返回路径信息。

2. 修正后的可运行代码 #

HTML部分：

<input type="file"  id="myFile" name="myFile">

JS部分：

// 变量定义在外部作用域，后续其他逻辑可以调用
let fileToSave = null;

$("#myFile").change(function (event) {  
  const input = event.target;
  // 先判断用户是否选中了文件，避免报错
  if (!input.files || input.files.length === 0) return;

  const reader = new FileReader();
  // 读取成功的回调，只有这里能拿到读取结果
  reader.onload = function () {
    // 把二进制内容存储到变量中
    fileToSave = reader.result;
    // 后续可在此处调用后端接口，将二进制内容传给后端存入SQL Server
    console.log('文件内容读取完成，已存储到变量', fileToSave);
  };
  // 建议加上错误回调，处理读取失败的场景
  reader.onerror = function () {
    console.error('文件读取失败，错误信息：', reader.error);
  };
  // 启动二进制读取任务
  reader.readAsBinaryString(input.files[0]);
});

3. FileReader使用技巧 #

• 处理大文件或需要高效传输二进制内容时，推荐用readAsArrayBuffer()替代readAsBinaryString()，ArrayBuffer是浏览器原生的二进制缓冲区，传输和处理性能更高，更适合传给后端存入数据库。
• 不同读取方法对应不同的结果格式，可按需选择：
  • readAsText()：读取为普通文本字符串，适合TXT、JSON等纯文本类文件
  • readAsDataURL()：读取为Base64格式的DataURL，适合前端直接预览图片、音频、视频等资源
  • readAsArrayBuffer()：读取为二进制缓冲区，适合大文件、任意格式二进制文件的传输与存储
  • readAsBinaryString()：读取为原始二进制字符串，属于较早期的API，性能弱于ArrayBuffer
• 可以通过reader.abort()方法主动终止正在进行的读取任务，可用于实现取消上传/读取的功能。
• 可通过reader.readyState属性判断读取状态：0=未开始读取，1=正在读取，2=读取完成。

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