如何使用 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 object。上次我这样做时，我还必须从 header 中删除 "Content-Type": "multipart/form-data"。我相信正确的 header 应该会自动填写。在有和没有说明 header 的情况下都尝试一下，让我知道是否有效。

Answer 2

这是我的解决方案。

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

axios.post(url, data);

出现错误时尝试和评论。

如何使用 multipart/form-data 发送请求？

how do I send a request using multipart/form-data?

javascript

http

multipartform-data