Как вы размещаете объект в одной конечной точке?Но это вложенные объекты для других, использующих Angular?

Question

У меня есть компонент новостной статьи, к которому в качестве шаблона прикреплено четыре разных изображения: заголовок, аватар и баннер с изображением и рекламой.Я пишу на английском языке.Изображения отправляются в конечную точку файлов (которая является каталогом файлов), и как только я загружу их, четыре изображения должны быть определены как ключевые значения в объекте новостной статьи: 'header_image', 'author_avatar', 'featured_image' и 'advertising_banner '.

Я передаю файл изображения и ключ непосредственно в функцию загрузки, чтобы убедиться, что я получаю правильное значение kv при загрузке изображения.При входе в консоль большой объем данных для изображений регистрируется, как и ключ, поэтому он правильно определен:

.component.html

<input type="file" name="header_image" (change)="fileProgress($event)"
        [(ngModel)]="header_image" accept=".jpg,.svg,.png,.jpeg">
<button class="update" (click)="uploadImage('header_image', header_image)">Upload</button>

.component.ts

uploadImage(key: string, imageFile) {
    if (null) {
      return alert('Please choose an image first')
    }
    imageFile = this.fileData;
    let reader = new FileReader();
    reader.readAsDataURL(imageFile);
    reader.onload = () => {
      let data = reader.result;
      this.configService.uploadImage({
        title: imageFile.name,
        name: imageFile.name,
        type: imageFile.type,
        size: imageFile.size, data
      }).subscribe(response => {
        imageFile = response.data;
        console.log(key, imageFile)//key values print exactly as expected
      });
    }
  };

article.ts

import { Image } from "../settings/image";
import { Feed } from "./feed";

export class Article {
    id: number;
    feed_type: {
        data: Feed;
    }
    title: string;
    description: string;
    text_content: string;
    author_name: string;
    author_avatar: {
        data: Image; //how do you post this image to files?
    }
    video_url: string;
    header_image: Image; //and this image to files?
    featured_image: Image; //and this image to files?
    twitter: string;
    facebook: string;
    instagram: string;
    advertising_banner: {
        data: Image; //and also this image to files at the time when createArticle() is clicked?
    }
    ad_link: string;
    likes: number;
    shares: number;
    views: number;
}

image.ts

export interface Image {
    id: number;
    date_uploaded: Date;
    url: string;
    name: string;
    title: string;
}

Путь пользователя при создании статьи выглядит следующим образом:

• пользователь пишет текст
• пользователь выбирает изображения и загружает их
• пользователь публикуетarticle

Как только изображения были загружены с помощью функции uploadImage (), есть кнопка окончательного создания статьи, которая вызывает это:

createArticle(article) {
    this.articleService.postArticle(article)
      .subscribe(
        response => {
          this.startLoading();
          if (response) {
            this.article = response.data;
            this.stopLoading();
          } else {
            this.stopLoading();
          }
        }
      )
}

Затем объект статьи публикуется вмассив статей на сервере, но изображения не подходят к нему.Я пришел в SO, чтобы узнать, создал ли кто-то что-то подобное ранее и у него есть хитрость, которой он мог бы поделиться, чтобы после загрузки изображений я мог смоделировать их для отдельных ключей изображения в объекте article.Затем отправьте весь объект как новый объект новостной статьи.

Answer 1

Хорошо, через некоторое время вдали от ноутбука я разобрался, как это сделать.В принципе, концепция была правильной: сначала загрузить изображение, а затем установить его в качестве значения для возможного запроса на публикацию статьи.

Теперь у меня есть правильная публикация статьи с использованием 4 различных изображений, которые теперь определяются индивидуально, и ниже я объясню, как я это сделал, если кому-то понадобится это в будущем.

Первое, что мне нужно было сделать, это определить выбранные изображения как типы, используя класс изображений - тогда это назначит изображение как объект, а не как поддельную строку пути:

selectedAvatarImage: Image;
selectedFeaturedImage: Image;
selectedAdvertImage: Image;
selectedHeaderImage: Image;

Затем мне нужно было создать новый объект, который в конечном итоге будет использовать вышеуказанные свойства и существующие значения ключей для объекта статьи.Они также должны быть определены как типы, чтобы гарантировать, что мы знаем, что мы пытаемся отправить:

title: string;
sub_title: string;
description: string;
text_content: string;
author_name: string;
twitter: string;
facebook: string;
instagram: string;
video_url: string;
ad_link: string;

При выборе изображения нам нужно загрузить его, но также убедиться, что оно настроено на выбранное правообраз.Таким образом, при наличии 4, небольшой переключатель пригодится для ответа данных после загрузки:

uploadImage Функция

uploadImage(key: string, imageFile) {
    if (null) {
      return alert('Please choose an image first')
    }
    imageFile = this.fileData;
    let reader = new FileReader();
    reader.readAsDataURL(imageFile);
    reader.onload = () => {
      let data = reader.result;
      this.configService.uploadImage({
        title: imageFile.name,
        name: imageFile.name,
        type: imageFile.type,
        size: imageFile.size, data
      }).subscribe(response => {
        imageFile = response.data;
        switch (key) {
          case 'author_avatar': this.selectedAvatarImage = response.data; console.log('avatar',this.selectedAvatarImage);
            break;
          case 'featured_image': this.selectedFeaturedImage = response.data; console.log('feature',this.selectedFeaturedImage);
            break;
          case 'advertising_banner': this.selectedAdvertImage = response.data; console.log('advert',this.selectedAdvertImage);
            break;
          case 'header_image': this.selectedHeaderImage = response.data; console.log('header',this.selectedHeaderImage);
        }
      });
    }
  };

это успешно определяет, какое изображениебыл загружен.

затем в функции CreateFile следующим образом:

createArticle() {
    let newArticle = {
      feed_type: this.selectedFeed,//image one
      title: this.title,
      sub_title: this.sub_title,
      description: this.description,
      text_content: this.text_content,
      author_name: this.author_name,
      author_avatar: this.selectedAvatarImage,//image two
      video_url: this.video_url,
      header_image: this.selectedHeaderImage,//image three
      featured_image: this.selectedFeaturedImage,//image four
      twitter: this.twitter,
      facebook: this.facebook,
      instagram: this.instagram,
      advertising_banner: this.selectedAdvertImage,
      ad_link: this.ad_link,
    }

    this.articleService.postArticle(newArticle)
      .subscribe(
        this.startLoading();
        response => {
          if (response) {
            this.article = response.data;
            this.stopLoading();
          } else {
            this.stopLoading();
          }
        }
      )
  }

в компоненте .html

Мне нужно было удалить [(ngModel)] извходные данные файла, чтобы убедиться, что я не получил те же ошибки, что и эта бедная душа: Ссылка

<input 
type="file" 
name="header_image" 
(change)="fileProgress($event)" 
accept=".jpg,.svg,.png,.jpeg">
<button class="update" (click)="uploadImage('header_image', selectedHeaderImage)">Upload</button>

Затем он отправляет все нужные вещи во все нужные места.

Как примечание, я думаю, что главным препятствием для меня было стремление думать об элегантности, а не о результате.Я ценю, что этот процесс довольно длительный, и я уверен, что будет более чистый и динамичный способ продвинуться вперед.Но для того, что требуется для этой функции, это работает, и именно это было наиболее важным, учитывая доставку.

Надеюсь, это поможет кому-то в будущем.