如何放置需要上传图像的位置？

Question

我有一个上传图片的地方，还有两个其他字段，名称和描述，名称和描述是必需的，但是我无法满足此要求，我真的不知道该怎么做，我令我惊讶的是，网上也没有什么可以帮助我解决这个问题的东西。 我的HTML代码就像下面执行上传的部分一样，如果您有任何想法请帮帮我，因为我不再有想法了：

<div class="profile-pic">
    <span class="helper">

    </span>
    <img
    src="{{currentImageUrl}}" 
    (error)="setDefaultImageUrl()" 
    class="avatar img-circle"
     [class.strech-image]="strechToBackGround" 
     [class.rounded-borders]="roundedBorders" alt="avatar">
    <div class="overlay" [class.isloading]="isLoading" 
    [class.strech-image]="strechToBackGround"></div>    
    <div class="edit" fxLayoutAlign="center center" fxLayoutGap="5px">        
        <div class="button" 
        *ngIf="!isLoading">
        <a href="#" (click)="$event.preventDefault();fileInput.click()"> 
          {{ 'apps.add' | translate }}
         </a>
        </div>
        <div class="button" 
        *ngIf="!isLoading && hasImage">
        <a href="#" (click)="$event.preventDefault();removeLogo();">
           {{ 'apps.remove' | translate }} 
          </a>
        </div>
    </div>
    <input style="display: none;"
     accept="image/*" type="file"
     (change)="onImageUploaded($event)"
      #fileInput>
</div>

这是我的TS代码：

export class ImageUploadComponent implements OnInit, OnDestroy {

  @Input() imageUrl: string;
  @Input() defaultImgUrl: string;
  @Input() id: string;
  @Input() strechToBackGround: boolean;
  @Input() roundedBorders: boolean;

  @Output() imgChanged: EventEmitter<any> = new EventEmitter<any>();

  currentImageUrl: string;
  currentLang: string;
  isLoading: Boolean;

  validImageTypes = ['image/jpeg', 'image/png'];

  constructor(private langService: LangService) {
    this.langService.currentLang.subscribe((lang) => {
      this.currentLang = lang;
    });
  }

  ngOnInit() {
    this.currentImageUrl = this.imageUrl;
  }

  imageWasChanged() {
    if (!this.imageUrl) {
      return this.currentImageUrl !== this.defaultImgUrl;
    }

    return this.currentImageUrl !== this.imageUrl;
  }

  ngOnDestroy() {

  }

  getCurrentImageUri() {
    return this.currentImageUrl;
  }

  setDefaultImageUrl() {
    this.currentImageUrl = this.defaultImgUrl;
  }

  get hasImage() {
    return this.currentImageUrl !== this.defaultImgUrl;
  }

  getCurrentImageContentType(): string {
    const imageUri = this.getCurrentImageUri();

    if (imageUri.indexOf(';')) {

      const block = imageUri.split(';');

      const contentType = block[0].split(':')[1];

      return contentType;
    }

    return '';
  }

  // if unchanged, result is empty
  getCurrentImageBase64OrEmpty(): string {
    const imageUri = this.getCurrentImageUri();

    if (imageUri.indexOf(',')) {
      return imageUri.split(',')[1];
    }

    return '';
  }

  // if unchanged, result is empty
  getCurrentImageBinaryOrNull(): Blob {
    const base64 = this.getCurrentImageBase64OrEmpty();

    if (base64) {
      return this.b64toBlob(base64, this.getCurrentImageContentType());
    }

    return null;
  }

  b64toBlob(b64Data, contentType = '', sliceSize = 512) {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = Array(slice.length);
      for (let i = 0; i < slice.length; i += 1) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }

  onImageUploaded(event) {

    if (event.target.files.length === 0) {
      return;
    }

    const file = event.target.files[0];

    if (!this.validImageTypes.includes(file.type)) {
      alert('Only jpg and png are allowed.');
      return;
    }

    if (file.size > 5242880) /*5mb*/ {
      alert('File is too big! Maximum size is 5 mb for a single image.');
      return;
    }

    this.isLoading = true;

    const fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = () => {
      this.currentImageUrl = <string>fr.result;
      this.isLoading = false;
      this.imgChanged.emit();
    };

  }

  removeLogo() {
    this.setDefaultImageUrl();
    this.imgChanged.emit();
  }

}