发送到后端前如何访问multipart/form-data类型图片Buffer实现上传前预览

Buffer的生成位置 #

你在后端看到的Buffer是**multer中间件在服务端生成的：
前端提交的FormData里携带的是浏览器原生File对象，本质是本地文件的二进制内容引用，multer收到请求后会解析multipart/form-data格式的请求体，把上传的文件二进制内容读取、封装为Node.js专用的Buffer格式，所以前端提交前的FormData里本来就不存在这个Buffer对象。

前端预览图片的实现方案 #

你完全不需要拿到服务端生成的Buffer就能实现提交前预览，浏览器提供了两种常用实现方案，直接操作前端拿到的File对象即可：

方案1：使用URL.createObjectURL（性能最优，代码简洁） #

直接在文件选择的change事件里，用选中的File对象生成临时可访问的URL，赋值给img标签的src属性即可，示例代码：

// 在你的filesChange方法里添加如下逻辑
function filesChange(fieldName, files) {
  // 假设页面上有id为previewImg的img标签用于展示预览图
  const previewImg = document.getElementById('previewImg')
  // 以第一个选中的图片为例
  if (files[0]) {
    // 生成临时预览地址
    const previewUrl = URL.createObjectURL(files[0])
    previewImg.src = previewUrl
    // 可选：图片加载完成后释放临时地址，避免内存泄漏
    // previewImg.onload = () => URL.revokeObjectURL(previewUrl)
  }
  // 保留你原本的其他逻辑不变
}

方案2：使用FileReader读取为Base64（需要处理二进制内容时可选） #

如果除了预览之外还需要拿到文件的二进制内容做其他处理，可以用这个方案：

function filesChange(fieldName, files) {
  const previewImg = document.getElementById('previewImg')
  if (files[0]) {
    const reader = new FileReader()
    reader.onload = function(e) {
      previewImg.src = e.target.result
      // e.target.result就是文件的Base64编码，也可以转成Uint8Array格式的二进制数据，和服务端Buffer内容完全对应
    }
    reader.readAsDataURL(files[0])
  }
}

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