如何使用 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'])