将 header 和 javascript 获取 POST 请求中的文件传递给烧瓶服务器

Question

我正在尝试创建一个简单的网站来运行图像上的神经网络。前端在 VUE.js 中，后端在 python 烧瓶中。我可以在 header 中传递我想要的数据，如 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 获取 api 中填充文件，还是我弄错了？

Answer 1

多亏了 Ibsn，我才开始工作。

要使 flask 接受 request.files：HTML 表格必须与 enctype=multipart/form-data 一起使用。 ()

幸运的是，javascript FormData() 使用的格式与编码类型设置为“multipart/form-data”时表单将使用的格式相同。所以我最终的 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);
},

将 header 和 javascript 获取 POST 请求中的文件传递给烧瓶服务器

Passing a header and a file in a javascript fetch POST request to a flask server

javascript

python

api

fetch

flask