JavaScript如何获取HTML表单中上传图片的Buffer数据

前端开发中存在如下包含文件上传控件的HTML表单：

<form action="/action_page.php">
  <input type="file" id="myFile" name="filename">
  <input type="submit">
</form>

需要通过JavaScript获取用户通过该表单上传图片对应的Buffer数据。

浏览器端可以通过原生File API读取文件的二进制数据，核心步骤如下：

• 绑定文件选择控件的事件，获取用户选中的图片文件对象
• 调用文件对象的异步读取方法，拿到二进制ArrayBuffer数据
• 若有Node.js环境的Buffer格式需求，可基于ArrayBuffer做格式转换

具体实现代码如下：

// 获取文件上传输入框、表单DOM
const fileInput = document.getElementById('myFile');
const uploadForm = fileInput.closest('form');

// 监听文件选择动作，选中文件后立刻读取
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  // 校验是否为有效图片文件
  if (!file || !file.type.startsWith('image/')) {
    console.warn('请选择有效的图片文件');
    return;
  }
  // 现代浏览器直接调用Blob原型上的arrayBuffer方法读取二进制数据
  const arrayBuffer = await file.arrayBuffer();
  console.log('图片二进制ArrayBuffer数据：', arrayBuffer);

  // 如果需要使用Node.js风格的Buffer实例（如对接Node服务场景）
  // 注意：浏览器原生无Buffer全局对象，需提前引入buffer依赖包后再执行转换
  // const imageBuffer = Buffer.from(arrayBuffer);
});

// 如果需要在表单提交时获取数据，记得先阻止默认跳转行为
uploadForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const file = fileInput.files[0];
  if (!file) return;
  const arrayBuffer = await file.arrayBuffer();
  // 后续可自行处理Buffer数据，比如通过接口上传、做本地预览解析等
});

兼容说明：如果需要适配IE等老旧浏览器，可以替换为FileReader方案读取：

const reader = new FileReader();
reader.onload = function(e) {
  const arrayBuffer = e.target.result;
  // 处理拿到的二进制数据
}
reader.readAsArrayBuffer(file);

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