通过XHR向Flask服务器上传文件时后端接收不到表单数据问题求助

• 核心问题出在JS代码里手动设置了错误的multipart/form-data请求头
  当你使用XMLHttpRequest发送FormData类型的请求体时，浏览器会自动为请求添加Content-Type: multipart/form-data头，同时自动生成用于分隔表单字段的boundary参数。你手动指定该头的操作会覆盖浏览器的默认行为，导致请求头丢失boundary参数，Flask无法正确解析表单内容，也就读不到任何表单和文件数据。
  修复方法：直接删除JS代码中xhr.setRequestHeader("Content-Type", "multipart/form-data")这一行即可。

• 可选优化：简化FormData构造逻辑
  你不需要额外创建DOM节点form来包裹文件输入框，可以直接构造FormData对象添加文件，逻辑更清晰：

  function submitInput(input) {
      const formData = new FormData()
      // 兼容多文件上传
      for (let i = 0; i < input.files.length; i++) {
          formData.append('file', input.files[i])
      }
  
      const xhr = new XMLHttpRequest()
      xhr.open("POST", "/upload")
  
      xhr.upload.addEventListener("progress", (e) => {
          const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0
          console.log(percent.toFixed(2))
      })
  
      xhr.send(formData)
  }
  

修改后重新测试即可正常上传，Flask侧可以通过request.files.getlist('file')获取到所有上传的文件，请求大小也会和实际上传的文件大小匹配。

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