时间戳

首页 > 解决方案 > 将 javascript fetch POST 请求中的标头和文件传递给烧瓶服务器

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

问题描述

我正在尝试创建一个简单的网站来在图像上运行神经网络。前端在 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 中填充文件，还是我弄错了？

标签： javascriptpythonapiflaskfetch

解决方案

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

为了让烧瓶接受 request.files：HTML 表单必须与 enctype=multipart/form-data 一起使用。（如何使用 JS fetch API 上传文件？）

幸运的是，如果编码类型设置为“multipart/form-data”，javascript FormData() 使用的格式与表单相同。所以我最终的 js 工作版本是这样的。（获取 Flask 请求中收到的数据）

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);
},

推荐阅读