Как загрузить фотографию через angular в Web API и добавить эту фотографию с другими значениями в новый объект из класса

Question

Итак, я делаю приложение с угловым и .NET API. Я хочу, чтобы люди загружали изображения с некоторым текстом (например, Имя, Город и т. Д.). Я уже нашел способ загрузить изображение с моего углового интерфейса на сервер. Проблема в том, что, когда я помещаю селектор изображений в форму с некоторыми другими полями ввода, я получаю неверный запрос. Чтобы было понятнее, посмотрите на код. Спасибо за вашу помощь.

По ссылке ниже вы можете найти фото того, как я храню загруженные изображения. Поэтому, если загрузка работает, должен быть способ добавить эти фотографии к другим значениям и создать карту. Я просто не знаю, что я делаю не так. https://imgur.com/ROk78EL

По этим 2 ссылкам вы можете видеть, что я хочу в качестве ввода, а затем, что делать с вводом. https://imgur.com/g6k2VAl (форма) https://imgur.com/FyzmLgh (результат)

Это мой конструктор карт из моего класса карт

       {
           Provincie = provincie;
           Postcode = postcode;
           Stad = stad;
           Photo = photo;
           Text = text;
           Likes = likes;
           Moeilijkheidsgraad = moeilijkheidsgraad;
       }

Это мой метод Post для создания новой Карты:

  [HttpPost]
        public ActionResult<Card> PostCard(CardDTO card)
        {
            Card cardToCreate = new Card() { Provincie = card.Provincie, Postcode = card.Postcode,
                Stad = card.Stad , Text = card.Text, Photo= card.Photo, Likes = card.Likes, Moeilijkheidsgraad = card.Moeilijkheidsgraad};
            _cardRepository.Add(cardToCreate);
            _cardRepository.SaveChanges();

            return CreatedAtAction(nameof(GetCard), new { id = cardToCreate.CardId }, cardToCreate);
        }

Это мой onSubmit (), поэтому, когда форма заполнена и нажата

  onSubmit() {
    this._cardDataService.uploadFile(this.add.value.image.files);


    this._cardDataService
      .addNewRecipe(new Card(this.add.value.provincie, this.add.value.postcode, this.add.value.stad,
      this.add.value.text,  this.add.value.image.files,  0, this.add.value.moeilijkheidsgraad)).subscribe();
    this.submitted = true;
    // this.add.reset();
    // this.removeImage();
  }

Это мое соединение с методом post в моем бэкэнде.

  addNewRecipe(card:Card) {
    return this.http.post(`${environment.apiUrl}/Card`, card.toJSON());
  }

Вот так я и отправляю изображение на свой бэкэнд

  public uploadFile = (files) => {
    if (files.length === 0) {
      return;
    }

    let fileToUpload = <File>files[0];
    const formData = new FormData();
    formData.append('file', fileToUpload, fileToUpload.name);

    this.http.post(`${environment.apiUrl}/Upload`, formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress)
          this.progress = Math.round(100 * event.loaded / event.total);
        else if (event.type === HttpEventType.Response) {
          this.message = 'Upload success.';
          this.onUploadFinished.emit(event.body);
        }
      });
    }

Это метод загрузки API

 [HttpPost, DisableRequestSizeLimit]
        public IActionResult Upload()
        {
            try
            {
                var file = Request.Form.Files[0];
                var folderName = Path.Combine("wwwroot","Resources", "Images");
                var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);

                if (file.Length > 0)
                {
                    var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                    var fullPath = Path.Combine(pathToSave, fileName);
                    var dbPath = Path.Combine(folderName, fileName);

                    using (var stream = new FileStream(fullPath, FileMode.Create))
                    {
                        file.CopyTo(stream);
                    }

                    return Ok(new { dbPath });
                }
                else
                {
                    return BadRequest();
                }
            }
            catch (Exception ex)
            {
                return StatusCode(500, "Internal server error");
            }
        }

Answer 1

в методе onSubmit, вы сначала загружаете файл, а затем снова отправляете его на сервер с формой, где в бэкэнде, как вы сказали, свойство Photo является строкой, поэтому вы получаете Bad request.

1. Когда вы загрузите фотографию и успешно сохраните ее, пусть сервер вернет PhtotPath как response.
2. , теперь отправьте PhtotPath со значениями формы всервер.

onSubmit() {
  // it should be array when you have multiple photos
  let photoPath;
  this._cardDataService.uploadFile(this.add.value.image.files).subscribe(res => {
    // the response from the api should have the photoPath
      photoPath = res.dbPath;
      this._cardDataService.addNewRecipe(
        new Card(this.add.value.provincie, this.add.value.postcode,
         this.add.value.stad, this.add.value.text, photoPath, 0, 
         this.add.value.moeilijkheidsgraad)).subscribe(res => {
              this.submitted = true;
         });

  });
 }