如何使用JavaScript无需文件输入控件将指定文件添加到FormData对象

核心前提说明 #

普通浏览器环境下JavaScript受沙箱安全限制，无法直接通过本地文件系统路径读取任意文件，必须经过用户主动授权的交互操作（点击文件选择按钮、将文件拖放到页面区域等）才能获取到文件内容，你目前直接把路径字符串append到FormData的写法是无效的，后端只会收到纯文本路径，不会收到文件本身。

场景1：可获取用户交互授权（浏览器端） #

不需要手动写input选择按钮的话，可以用拖放交互实现，示例代码如下：

// 监听页面的文件拖放事件
document.addEventListener('drop', e => {
  e.preventDefault();
  // 获取拖入的第一个文件
  const targetFile = e.dataTransfer.files[0];
  
  const form = new FormData();
  form.append("input", '{ ... some json ... }');
  // 直接把File对象append进去即可
  form.append("files", targetFile);
  
  // 后续执行上传逻辑
}, false);

document.addEventListener('dragover', e => {
  e.preventDefault();
}, false);

场景2：需要添加的是可公网访问的远程文件（浏览器端） #

如果目标文件是网络资源而非用户本地私有文件，可以先通过fetch请求拉取文件内容转成Blob，再构造为File对象加入FormData：

async function buildFormData() {
  const form = new FormData();
  form.append("input", '{ ... some json ... }');
  
  // 拉取远程文件
  const fileRes = await fetch('https://你的文件地址/File.txt');
  const fileBlob = await fileRes.blob();
  // 构造File对象
  const targetFile = new File([fileBlob], 'File.txt', { type: 'text/plain' });
  
  form.append("files", targetFile);
  return form;
}

场景3：Node.js/ Electron等非浏览器沙箱环境 #

这类环境没有浏览器的安全限制，可以直接读取本地路径的文件：

const fs = require('fs');
const FormData = require('form-data');

const form = new FormData();
form.append("input", '{ ... some json ... }');
// 直接读取本地文件流append到FormData
form.append("files", fs.createReadStream('C:/My/Path/File.txt'));

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