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

【问题标题】：How to send file metadata over api using fetch如何使用 fetch 通过 api 发送文件元数据
【发布时间】：2021-08-16 20:01:14
【问题描述】：

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

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

然后，服务器在数据库上注册文件、文件位置以及上传日期等信息。

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

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

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

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

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

前端是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,
        })

【问题讨论】：

标签： javascript reactjs flask fetch-api

【解决方案1】：

经过一番排查，我发现正确的做法确实是将metaData添加到formData中。起初它不起作用的原因是因为我试图在 python 烧瓶中错误地访问它。所以，在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'])

【讨论】：