在JavaScript fetch POST请求中向flask服务器传递一个头和一个文件

Question

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

这是我在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);
},

这是我的flask服务器代码:

@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接受请求。一个HTML表单必须与enctype=multipart/form-data一起使用。(我如何上传一个文件与JS fetch API?)

幸运的是，javascript FormData()使用相同的格式，如果编码类型被设置为"multipart/form-data"所以我最终的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);
},