ASP.Core Загрузка изображения с помощью Axios

Question

Я пытаюсь загрузить изображение на сервер с Axios, но с ошибкой 400 «Bad Request». Я пробовал много разных способов его реализации: явное указание «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):

Answer 1

В настоящее время в моем контроллере я установил точку останова, однако я никогда не видел, чтобы запрос вводил ее.

Я предполагаю, что ваши конфигурации для .Net Core Middleware Pipeline могут быть неверными. Дважды проверьте следующее:

• По умолчанию .Net Core использует attribute routing. Убедитесь, что вы случайно не включили conventional routing.

• Ваш запрос может быть обработан другим промежуточным программным обеспечением до того, как он достигнет промежуточного программного обеспечения MVC в middleware pipeline. Дважды проверьте этот метод в Startup.cs:

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

  Для отладки вы должны удалить все остальные промежуточные программы, кроме MVC.

Answer 2

Существует два варианта, в зависимости от того, нужен ли вам API-контроллер или нет.

• Во-первых, нужно удалить APIControllerAttribute с вашего контроллера, затем больше ничего делать не нужно;
• Второй - настроить Startup.cs, как предписывает doc . Добавление services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); решил мою проблему.

ПРИМЕЧАНИЕ : нет необходимости устанавливать заголовки на undefined или что-либо еще. Сам Аксиос справляется с этим правильно.

Answer 3

добавить неопределенный тип контента. тогда должно работать

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