如何通过JS程序化设置文件输入框值以提交大二进制对象？

我需要通过<form>提交大型二进制对象，旧实现是把对象转成Base64字符串放在<input type="hidden">里提交，但Base64会让数据体积膨胀30%左右，导致请求超出了Web服务器的大小限制。想改用<input type="file">直接提交原始二进制数据来避免这个问题，请问这种方式可行吗？

当前使用的代码如下：

function submitToServer(evt) {
  evt?.preventDefault?.()

  const myForm = document.querySelector('form#RequestModal'),
    data = new FormData(myForm)

  let fetchData = [
    fetch(_API_ENDPOINT_ + '/path/to/controller', {
      method: 'POST',
      body: data,
    }),
    // 其他请求...
  ]

  Promise.all(fetchData)
    .then(([uploadRes, tokenRes, serversStatus]) => {
      // 处理响应...
    })
    .catch(E => {
      // 错误处理...
    })
}

表单里原本有多个通过JS程序化填充的隐藏输入框，我正尝试把这些字段替换成用CSS隐藏的文件输入框。补充说明：我不是想手动用FormData.append()添加Blob，而是希望把Blob直接放进<input type="file">中，让原生FormData解析表单时自动收集Blob内容。

直接通过JS把Blob塞进<input type="file">让FormData自动收集不可行——出于安全考虑，浏览器不允许脚本直接修改文件输入框的files属性，这个属性只能通过用户主动选择本地文件、或者拖拽上传等交互方式来填充，没法通过代码直接赋值Blob。

最终采用的替代方案 #

放弃了直接用文件输入框的思路，写了一个辅助函数来处理：

• 函数接收目标<form>元素作为参数
• 通过表单上预先设置的存储标识符，从关联的存储（比如内存缓存、localStorage）中取出对应的Blob
• 手动将Blob追加到FormData对象中，再返回处理后的FormData

这个方案虽然比最初的想法多了几步逻辑，但项目里的新手也能轻松理解和维护。

另外，后续可能会发布一个不违反保密协议的简化版函数——这个方案的可定制性很强，只是受限于知识产权协议，暂时没法公开完整实现。

内容的提问来源于Stack Exchange，提问作者Perritu