c# - ASP.Core 使用 Axios 上传图片

Question

我正在尝试使用 Axios 将图像上传到服务器，但出现错误 400“Bad Request”。我尝试了许多不同的方法来实现它:显式指定“Content-Type”、更改 Controller 、尝试 $.ajax等来自谷歌。

简要说明我的期望:我选择了 <input/> 建议的图片一旦我提交我的选择，它就会被发送到服务器。

目前，在我的 Controller 中，我设置了一个断点，但是，我从来没有看到请求进入它。

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

Controller :

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

react 组件:

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>
            );
        }
    }

这是我在浏览器中的内容(具体来说是 Yandex 浏览器，基于 Chrome):

Answer 1

根据您是否需要 API Controller ，有两种选择。

• 首先是从您的 Controller 中删除 APIControllerAttribute，然后无需执行任何其他操作；
• 第二个是将 Startup.cs 设置为 doc规定。添加services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); 解决了我的问题。

注意:没有必要将 header 设置为undefined 或其他。 Axios 自己以正确的方式处理它。