如何使用 fetch 通过 api 发送文件元数据

Question

在我开发的web-app中，用户可以上传文件。作为上传过程的一部分，用户必须指定文件的类型（例如发票、收据、合同）以及客户是谁。

然后我使用提取将文件发送到后端服务器。从 back-end 服务器上传到 ftp。在 ftp 上，我需要根据文件类型 ID 和客户 ID 创建一个目录。例如，它应该在目录 ftp/invoices/kfc .

中

然后，在数据库中，服务器注册文件、它的位置，例如，它的上传日期。

理想情况下，我想将元数据（文件类型、客户）作为同一提取的一部分发送。

我的后端服务器正在使用 python 和 flask。

我的前端代码如下。我已经尝试了几件事：

我试过将元数据添加为 formData 元素，但 flask 不喜欢这样，当我尝试读取它时抛出 400 错误。
我也考虑过执行一个 two-step 过程，首先发送元数据，然后发送文件（或相反的方式），但这似乎比需要的更复杂。
我也尝试过将元数据作为 headers 添加到 api 请求中，但后来我运行陷入了我希望避免的 cors 并发症。
我尝试将元数据创建为一个额外的简单 json 文件以与 formData 一起发送，但我不清楚如何在 [=44] 中“即时创建文件” =] 反应应用程序。也许这没什么大不了的？
我也花了一些时间在互联网上搜索解决方案，但没有真正符合我尝试做的事情（这看起来很可疑）

我希望有人能告诉我有一个简单的方法可以做到这一点。

前端是React-redux，后端是python，flask和数据库在MySQL

case 'SEND_FILE_TO_SERVER':
        const formData = new FormData();           
        
        formData.append('File', action.fileToSend);

        fetch(window.location.origin + '/api/submit-file', {
            method: 'POST',
            body: formData,
        })

Answer 1

经过更多的排查，我发现正确的做法确实是将元数据添加到表单数据中。起初它不起作用的原因是因为我试图在 python flask 中错误地访问它。所以，在 javascript 你应该

formData.append('File', action.fileToSend);
formData.append('metaData', JSON.stringify(action.metaData));

然后在 python 烧瓶中你应该

@app.route('/api/submit-file', methods=["POST"])
def submit_file():
    file = request.files['File']
    metaData = loads(request.form['metaData'])

如何使用 fetch 通过 api 发送文件元数据

How to send file metadata over api using fetch

javascript

flask

reactjs

fetch-api