将 javascript fetch POST 请求中的标头和文件传递给烧瓶服务器答案

【问题标题】：Passing a header and a file in a javascript fetch POST request to a flask server将 javascript fetch POST 请求中的标头和文件传递给烧瓶服务器
【发布时间】：2021-12-05 15:15:45
【问题描述】：

我正在尝试创建一个简单的网站来在图像上运行神经网络。前端在 VUE.js 中，后端在 python 烧瓶中。我可以在标头中传递我想要的数据，例如 id 和精度，但是，该文件不会“上传”到烧瓶服务器。知道我应该怎么做吗？

这是我在 javascript 中的方法：

async predictUF(img) {
  //let config = {header : {'Content-Type' : 'image/png'}}
  const response = await fetch("http://localhost:5000/process_img", {
      method: 'POST',
      headers: {'id': '123', 'precision': '75'},
      files: img,
      mode: 'cors',
      cache: 'default'
    });
    
  const recv = await response.json();
  console.log(recv);
},

这是我的烧瓶服务器代码：

@app.route('/process_img', methods=['POST', 'GET'])
@cross_origin()
def process_image():
    if request.method == 'POST':
        filenames = []
        payload = request.headers
        id = payload['id']
        precision = payload['precision']
        files = request.files.to_dict(flat=False)
        for file_list in files.values():
            for file in file_list:
                name = secure_filename(file.filename)
                path = save_image(file, name)
                filenames.append(path)

        results, img_paths = run_process(filenames)
        encoded_imgs = [encode_image(p) for p in img_paths]
        return jsonify({'msg': 'success', 'results': [results], 'images': encoded_imgs})
    else:
        return 'Methods restricted'

我有一个 python 脚本来测试完美运行的 api，它是这样的（我故意忽略 base64 编码以简化问题）：

r = requests.post(url, files=files, data=payload)

有什么方法可以在 javascript fetch api 中填充文件，还是我弄错了？

【问题讨论】：

https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api
fetch 选项对象中没有files 属性
我尝试使用正文而不是文件，但它不起作用。 Flask 请求没有正文
我不是 Flask 用户，但这个答案可能很有用：https://stackoverflow.com/questions/10434599/get-the-data-received-in-a-flask-request
谢谢，我想我现在明白了

标签： javascript python api flask fetch

【解决方案1】：

感谢 Ibsn，我得到了它的工作。

要让 flask 接受 request.files：HTML 表单必须与 enctype=multipart/form-data 一起使用。 (How do I upload a file with the JS fetch API?)

幸运的是，如果编码类型设置为“multipart/form-data”，javascript FormData() 使用的格式与表单相同。所以我最终的 js 工作版本是这样的。 (Get the data received in a Flask request)

async predictUF(img) {
  var data = new FormData();
  data.append('files', img, img.name);
  const response = await fetch("http://localhost:5000/process_img", {
      method: 'POST',
      headers: {'id': '123', 'precision': '75'},
      body: data,
      mode: 'cors',
      cache: 'default'
    });
    
  const recv = await response.json();
  console.log(recv);
},

【讨论】：