Question

我正在使用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”处理程序中触发并显示：

“response - then：data：Array（0），status：201，statusText：”Created“ “

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

非常感谢任何帮助。

谢谢！

Answer 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属性

Answer 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=="

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

2 个答案: