Как отправить объект и файлы в одном почтовом запросе, используя angular front и. net core API?

Question

Я постараюсь go прямо к проблеме, которая у меня возникла. Я использую Angular 8 и. net core 2.2.

Допустим, у меня есть служба http для сохранения объекта, который выглядит примерно так:

  let body = new DataObject(); //object with lost of primitive data.
  body.someNumbers = 111;
  body.someStrings = 'some string';

  let options = { withCredentials: true };
  return this.http.post<DataObject>(url, body, options).pipe(
    catchError(this.handleError<DataObject>('SAVE', body))
  );

Моя конечная точка выглядит так:

    [HttpPost]
    [Route("savedata")]
    public async Task<IActionResult> SaveData(DataObject data) {

        await Task.Factory.StartNew((Action)(() => {
           //Do stuff....
        }));

        return Ok();
    }

Пока что это прекрасно работает.

У меня также есть другой сервис для сохранения файлов, который выглядит следующим образом:

    let imageData = new FormData();
    imageData.append('files', imgFile, imgFile.name);

    let options = { withCredentials: true };
    return this.http.post<FormData>(url, imageData, options).pipe(
      catchError(this.handleError<FormData>('SAVE', imageData)) 
    );

И конечная точка:

 [HttpPost]
    [Route("saveimg")]
    public async Task<IActionResult> UploadImageAsync(IFormFile imgfile) { 
      //converts to byte[], saves on database and returns id.
      return Ok(imgId);
    }

В основном я хочу объединить DataObject и файл на одном и том же POST. Я попытался сделать это:

class DataObject() { someNumbers: number; someStrings:string; imgFile: FormData;}

с соответствующим свойством public IFormFile imgFile { get; set; } в моем классе. net, чтобы соответствовать.

Но я получаю 400 Ошибка Bad Request

Как отправить объект и изображение по одному и тому же запросу в одну и ту же конечную точку. Если на вопрос уже дан ответ, укажите ссылку. Я просмотрел все, но не уверен, что является правильным термином поиска. Спасибо.

Answer 1

Вы можете сделать следующее

 this.formData = new FormData(); this.formData.append('dataFile', this.file, this.file.name); 

И ваш json запрос выглядит следующим образом

const data = { req: //your request object}

И, наконец, добавить данные в виде BLOB-объекта в formData и отправить их в службу

this.formData.append('jsonReq', new Blob([JSON.stringify(data)], {
  type: 'application/json'
})); 

return this.http.post(tgtUrl, data, httpOptionsForUpload).pipe(map((res: Response) => { //handle reponse }