时间戳

首页 > 解决方案 > 如何使用 React 将图像发送到 AspNetCore

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

问题描述

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

<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 但没有任何效果。

标签： reactjsasp.net-corefetch-api

解决方案

用于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]到此参数，在这种情况下实际上是相同的。

推荐阅读