JS fetch POST请求向Flask服务器传递请求头与文件的问题咨询

Fetch API 没有files这个配置项，你之前用的Python requests库的files参数是requests封装的专属语法，直接套用到fetch上属于用法错误，文件不会被正常发送到后端。
文件上传需要使用FormData对象封装数据，走标准multipart/form-data格式提交，和你之前用Python requests调用的请求格式完全一致，后端现有逻辑不需要做任何修改。

async predictUF(img) {
  // 创建FormData对象封装上传文件
  const formData = new FormData();
  // 第一个参数为文件字段名，可自定义，后端也可通过request.files.get('img')直接读取单个文件
  // 若img为Blob类型，可传入第三个参数指定文件名：formData.append('img', img, 'test.png')
  formData.append('img', img);

  const response = await fetch("http://localhost:5000/process_img", {
      method: 'POST',
      headers: {'id': '123', 'precision': '75'},
      body: formData, // 用body字段传递封装好的FormData
      mode: 'cors',
      cache: 'default'
    });
    
  const recv = await response.json();
  console.log(recv);
}

• 不要手动设置Content-Type: multipart/form-data请求头，浏览器会自动生成带边界标识的正确请求头，手动设置会导致边界标识缺失，Flask无法正常解析表单数据
• 如果需要上传多个文件，循环调用formData.append('img', 对应文件对象)即可，你现有后端的request.files.to_dict(flat=False)遍历逻辑可直接兼容多文件上传
• 确保传入函数的img参数为标准File/Blob对象，通常来自input[type=file]的files属性、或者Canvas导出的Blob对象

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