Appded FormData отправляет нулевое значение в API

Я использовал ngx-image-cropper в своем проекте Angular для обрезки изображений перед загрузкой. Некоторые связанные части компонент.ts:

croppedImage: any = '';
imageCropped(event: ImageCroppedEvent) {
  this.croppedImage = event.base64;
}
Base64ToFile(url: any, filename: any, mimeType: any){
    return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename,{type:mimeType});})
        );
  }

 OnSubmit() {
    const filedata = new FormData();
    this.Base64ToFile(this.croppedImage, "myphoto.png", "image/png").then(function(outputFile){
      
      console.log(outputFile);
      filedata.append("file", outputFile, outputFile.name);//The first parameter "file" is the input parameter in API method
    });
    this.http.post('https://localhost:5001/api/featuredpost/postimage/' + this.selectedPostId, filedata).subscribe(
      response => {
        console.log(response);
      }
    );
  }

Действие API:

public async Task<IActionResult> PostImage([FromForm] IFormFile file, [FromRoute] int id){
    ...
}

Проблема в том, что когда я отлаживаю свой API, входной параметр file имеет значение null, а cropped image имеет строковое значение base64. Как я могу это исправить? Я искал связанные вопросы, но не нашел решения для моего случая. Связанный вопрос

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
48
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

this.http.post должен быть в .then(...) звонка this.Base64ToFile(..)

Вы не ждете завершения asyncfetch перед API post

Другие вопросы по теме