如何使用 multipart/form-data 發送請求？

Question

我在 ReactJs 中有一個應用程序，使用 Axios 和 Papaparse。

我有一個頁面，用戶將一個 csv 文件放入一個盒子中，我自動下載 csv，更新並更改數據，然后將新的 csv 文件發送到服務器。

我完成了所有工作，直到到達需要創建新 csv 並將其上傳到服務器的部分。

這是我目前的代碼：

            const data = papaparse.unparse(destinationUpdateData, {
                header: true,
                skipEmptyLines: true
            });
            // data is a string in csv format

            const file = new File([data as BlobPart], "destination.csv",  { type: "text/csv" });
            // I get a File type.

            const paramsDestination = {
                project_id: this.props.projectId,
                datastore_id: 'DESTINATIONS',
                file: file,
                id: ["1", "2","3"]
            }
            // the data I would like to send is build

            Axios.post(`new_item_file_attachment`, params, {headers: {"Content-Type": "multipart/form-data"}})
            //I send to the server

問題是，我的服務器正在等待內容類型為multipart/form-data的請求，但我不知道如何手動設置我的參數以匹配此類型。

api 調用當前不起作用，因為數據像 json 一樣傳遞，服務器拒絕它。

有可能實現嗎？

我嘗試使用FormData ，但我看不到如何發送布爾值和數組

Answer 1

不是 100% 熟悉 Axios，但它應該是這樣的：

var params = new FormData();

params.append("project_id", this.props.projectId);
params.append("datastore_id", 'DESTINATIONS');
params.append("file", file);
params.append("id", JSON.stringify(["1", "2","3"])); // Arrays must be stringified
Axios.post(`new_item_file_attachment`, params)

您肯定需要將所有內容都放在 FormData 對象中。 上次我這樣做時，我還必須從標題中刪除“Content-Type”：“multipart/form-data”。 我相信應該自動填充正確的標題。 嘗試使用和不使用聲明標題並讓我知道其中任何一個是否有效。

Answer 2

這是我的解決方案。

const data = new FormData();
data.append("project_id", id);
data.append("file", file);

axios.post(url, data);

出現一些錯誤時嘗試和評論。