如何将拖拽获取的图片文件传入表单并提交至Node.js Multer接口

问题原因 #

两个核心错误导致文件未提交：

1. dragHandler函数中form.submit没有加括号，属于属性访问而非方法调用，表单根本没有执行提交动作
2. 拖拽获取到的File对象没有写入表单的文件输入框中，表单默认只会携带用户手动选择的文件，不会自动带上拖拽得到的文件

修复步骤 #

1. 补充拖拽默认行为拦截 #

在body标签的dragover事件中也阻止默认行为，否则部分浏览器会直接打开拖拽的文件，不会触发drop事件：

<body ondrop="dragHandler(event);" ondragover="event.preventDefault()">

2. 修改dragHandler函数 #

通过DataTransfer对象将拖拽得到的文件写入原有的文件输入框，再提交表单，完整代码如下：

function dragHandler(event) {
  event.preventDefault();
  // 获取表单中原有的文件选择按钮（就是你原来绑定change事件的formBtn）
  const fileInput = document.getElementById('formBtn');
  let file;
  if (event.dataTransfer.items) {
    if (event.dataTransfer.items[0].kind === "file") {
      file = event.dataTransfer.items[0].getAsFile();
      // 构造DataTransfer对象，用于给文件输入框的files属性赋值
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(file);
      // 将文件写入输入框，和用户手动选择文件的效果完全一致
      fileInput.files = dataTransfer.files;
      // 提交表单，注意必须加()执行submit方法
      document.getElementById('form').submit();
    } else {
      console.log('not a file');
    }
  }
}

3. 校验Multer配置一致性 #

确保你的文件输入框的name属性值，和Multer初始化时的字段名完全对应。比如：

• 输入框代码：<input type="file" id="formBtn" name="uploadImg">
• 后端Multer配置就要对应为：const upload = multer({ dest: 'uploads/' }).single('uploadImg')
  如果两个字段名不一致，也会出现req.file为undefined的问题。

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