如何使用React将图像发送到AspNetCore

Question

我试图在我的反应应用程序上获取一个文件，如下所示：

<form onSubmit={this.onSubmit}>
    <label htmlFor="Images">Images:</label>
    <input type="file" id="Images" onChange={this.onChangeImage} accept="image/png, image/jpeg"/>
    <button type="submit" value="SubmitImage" onClick={this.onSubmit}>Submit</button>
</form>

而onSubmit看起来像这样：

onSubmit = (event) => {
    event.preventDefault();
    if(event.target.value === "SubmitImage"){
        fetch("https://localhost:5001/api/projects/edit/image/" + this.props.projectId + "/add", 
        {
            method: "PUT",
            body: JSON.stringify({photo: this.state.Images[0]})
        });
    }
    else{
        return;
    }
}

而我正试图在我的后端接收这个：

[HttpPut]
[Route("projects/edit/image/{id}/{toDo}")]
public void EditProjectImage(string id, string toDo, IFormFile photo)
{
    if(toDo == "Add")
    {
        var result = mContext.Projects.Single(project => project.Id.Equals(id));  
    }
}

（忽略if语句中缺少逻辑，我目前只是试图让这个函数运行）我做错了什么？我尝试使用[FromBody]，使用formdata但没有任何作用。

Answer 1

使用FormData发送文件

var formData = new FormData();
formData.append("photo", this.state.Images[0]);
fetch("https://localhost:5001/api/projects/edit/image/" + this.props.projectId + "/add", 
{
    method: "PUT",
    body: formData 
});

并保持IFormFile photo原样。模型绑定器默认绑定表单数据中的参数，在这种情况下是正确的行为。或者您可以将[FromForm]添加到此参数中，在这种情况下实际上是相同的。