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

Question

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

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

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

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

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

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

• 我尝试将元数据添加为 formData 元素，但 flask 不喜欢这样，当我尝试读取它时会抛出 400 错误。
• 我还考虑过先发送元数据然后发送文件（或相反）的两步过程，但这似乎比它需要的要复杂。
• 我还尝试将元数据作为标头添加到 api 请求中，但后来我遇到了我希望避免的 cors 并发症。
• 我尝试将元数据创建为一个额外的简单 json 文件以与 formData 一起发送，但对我来说如何在前端 React 应用程序中“动态创建文件”并不明显。 也许没什么大不了的？
• 我也花了一些时间在互联网上搜索解决方案，但没有什么真正符合我想要做的事情（这似乎很可疑）

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

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

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

经过一番排查，我发现正确的做法确实是将metaData添加到formData中。 起初它不起作用的原因是因为我试图在 python flask 中错误地访问它。 所以，在 javascript 你应该有

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

然后在 python flask 你应该有

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