Question

我正在尝试使用Axios将图像上传到服务器，但是出现错误400“错误请求”。我尝试了许多不同的方法来实现它：显式指定“ Content-Type”，更改控制器，尝试使用$.ajax等来自Google。

对期望的简要说明：我选择了<input/>所建议的图像，并在提交选择后将其发送到服务器。

当前，在我的控制器中，我设置了一个断点，但是我从未见过请求输入它。

我的堆栈是Asp.Core WebAPI + React.js + Axios。我已经停止了以下代码：

控制器：

[Route("api/char")]
[ApiController]
public class CharacterController : ControllerBase
{
    [HttpPost]
    [Route("[action]")]
    public async Task<IActionResult> SetProfilePhoto(IFormFile file)
    {
        return Ok();
    }
}

反应成分：

export default class BioEdit extends React.Component {
        ...
        changePhoto = event => {
             event.preventDefault();

             const file = event.target.files[0];

             const formData = new FormData();
             formData.append("File", file);

             Axios.post("api/char/SetProfilePhoto", formData, {
                  headers: { 'Content-Type': 'multipart/form-data' }
             })
                  .catch(error => console.log(error));
         }
         render(){
             return (
                 <label >
                     <img src={this.state.char.image} width="30%" height="30%" className="border border-secondary" />
                     <input type="file" style={{ display: "none" }} accept="image/*" onChange={this.changePhoto} />
                 </label>
            );
        }
    }

这是我在浏览器中的功能（具体来说，它是基于Chrome的Yandex浏览器）：

Answer 1

根据是否需要API控制器，有两种选择。

首先是从控制器上移除APIControllerAttribute，然后无需执行其他操作；
第二步是按照doc的规定设置Startup.cs。新增中 services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);解决了我的问题。

注意：无需将标头设置为undefined或其他任何内容。 Axios本身以正确的方式处理它。

Answer 2

添加未定义的内容类型。然后应该可以工作

         Axios.post("api/char/SetProfilePhoto", formData, {
              headers: { 'Content-Type': undefined }
         })

Answer 3

当前，在我的控制器中，我设置了一个断点，但是我从未见过请求输入它。

我的假设是您对.Net Core Middleware Pipeline的配置可能不正确。仔细检查以下内容：

默认情况下，.Net Core使用attribute routing。确保您没有意外启用conventional routing。
您的请求可能会由其他中间件处理，然后才能到达MVC中的middleware pipeline中间件。在Startup.cs中再次检查此方法：

public void Configure(IApplicationBuilder app) {...}

要进行调试，您应该删除除MVC以外的所有其他中间件。

使用Axios的ASP.Core上传图像

3 个答案: