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);

尝试并在出现某些错误时发表评论。

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

2 个答案: