使用 Axios 将表单数据发布到 .NET API答案

【问题标题】：posting form data with Axios to .NET API使用 Axios 将表单数据发布到 .NET API
【发布时间】：2018-05-21 14:27:27
【问题描述】：

我正在使用 React 和 Axios 将 formData 发布到内部 .NET API。

API 需要这样的数据：

    [HttpPost("upload")]
    public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
    {
        foreach (var file in fileData) {
            await SaveFile(file, parent);
        }

        return Created("", Map(Repository.Get(parentId)));
    }

当我单步调试时，“fileData”的计数始终为 0。

这是我使用 Axios 发送它的方式：

    const formData = new FormData();
    formData.append('image', this.state.file);

    console.log("this.state.file = ", this.state.file);
    console.log("formData = ", formData);

    axios({
        url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
        method: 'POST',
        data: formData,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data'
        }
    })
       .then((response) => {
            //handle success
            console.log('response -- then: ', response);
            this.setState({
                file: this.state.file
            });
        })
        .catch((response) => {
            //handle error
            console.log('response -- catch: ', response);
        });

我使用 console.log 进行调试。当我写出文件对象（名称、大小等）时，它会向我显示文件对象。

它还在方法的“.then”处理程序中触发并显示：

“响应——则：数据：数组（0），状态：201，状态文本：“已创建” "

所以，我不知道为什么它没有向 API 发送任何内容，我真的不知道发生了什么或如何解决这个问题。

任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： javascript .net asp.net-mvc reactjs axios

【解决方案1】：

你应该发布formData的数组

const filesToSubmit = []
filesToSubmit.push((new FormData()).append('image', this.state.file))

在发布数据时，属性名称应为formData

axios({
    url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
    method: 'POST',
    data: {formData : filesToSubmit},
    headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data'
    }
})

如果在构造数组时出现问题，您需要将IFormFile 属性添加到数组中

【讨论】：

不幸的是它不起作用。它似乎在前端工作，但是当它传递给 API 时，它是 NULL。

【解决方案2】：

所以我遇到了完全相同的问题，无论我以何种方式扭曲 FormData 对象，无论我发送的标头如何，我都无法让 .NET 接受提交。

在 Node.js 方面，实际上很难检查 Axios 发出的 HTTP 调用——这意味着我看不到我实际发布的内容。

所以我将 POST 移到 UI 进行一些调试，发现 FormData 有效负载没有按我的预期传递，因此 .NET 拒绝是正确的。

我最终使用了下面的配置，并且 POST 开始通过。同样，就我而言，我认为我需要FormData，但下面的内容很简单：

axios({
    url: myUrl,
    method: 'POST',
    data: `email=${myEmail}`,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
.then(response => {
    console.log(response);
    })
.catch(error => {
    console.error(error);
});

更新：不确定编码数据将如何工作，但由于它将作为字符串传递，因此值得一试！

const myUploadedImage = "data:image/png;name=colors.png;base64,iVBORw0KGgoAAAANSUhEUgAAA5gAAAEECAIAAADCkQz7AAAGGUlEQVR4nO3YIY/IcRzHcWd4AjZJkZQr2I1dIJlyRU5ErkJggg=="

【讨论】：

我可以看到这对字符串 (myEmail) 是如何工作的，但我不确定它是否能解决我的问题，因为我正在尝试将上传的图像传递给 API。
@SkyeBoniwell 好点，我更新了答案——因为它将是 base64 编码的，这是一个字符串，值得一试，但谁知道呢。我正在严格处理字符串表单字段。