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

出现一些错误时尝试和评论。