上传图片问题，使用angular material

Question

我是角度材料的新手，我正在尝试让我上传的任何图像占据我的头像图像的位置。 首先头像图片不显示，其次当我上传图片时它不显示。

HTML

 <div class="select-image">
        <img [src]="imgSource" class="circle hims-orange" [class.circle]="circle" alt="Avatar" (click)="select.click()">
        <button mat-mini-fab color="accent" matTooltip="Add Image" class="select-btn" type="button" (click)="select.click()">
            <mat-icon>add_a_photo</mat-icon>
        </button>
        <input type="file" accept="image/gif, image/jpeg, image/png" #select hidden (change)="imageChanged($event)" />
    </div>

TS

imageChanged(imgSource?: MatCardImage): void {
    this.image = this.imgSource
    console.log('working')
  };

the button

Answer 1

请找到以下 Angular Material Image Upload 示例：

上传图像.component.html：

<div *ngFor="let progressInfo of progressInfos">
  <span>{{ progressInfo.fileName }}</span>
  <mat-toolbar class="progress-bar">
    <mat-progress-bar
      color="accent"
      [value]="progressInfo.value"
    ></mat-progress-bar>
    <span class="progress">{{ progressInfo.value }}%</span>
  </mat-toolbar>
</div>

<mat-form-field>
  <div>
    <mat-toolbar>
      <input matInput [value]="selectedFileNames.length ? selectedFileNames : 'Select Images'" />

      <button
        mat-flat-button
        color="primary"
        [disabled]="!selectedFiles"
        (click)="uploadFiles()"
      >
        Upload
      </button>
    </mat-toolbar>

    <input
      type="file"
      id="fileInput"
      name="fileInput"
      accept="image/*" multiple 
      (change)="selectFiles($event)"
    />
  </div>
</mat-form-field>

<div>
  <img *ngFor='let preview of previews' [src]="preview" class="preview">
</div>

<div *ngIf="message.length" class="message">
  <ul *ngFor="let msg of message; let i = index">
    <li>{{ msg }}</li>
  </ul>
</div>

<mat-card class="list-card">
  <mat-card-header>
    <mat-card-title>List of Images</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-list role="list">
      <mat-list-item role="listitem" *ngFor="let image of imageInfos | async" class="list-item">
        <p matLine><a href="{{ image.url }}">{{ image.name }}</a></p>
        <img src="{{ image.url }}" alt="{{ image.name }}" height="50px"/>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

上传-imges.component.ts：

import { Component, OnInit } from '@angular/core';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { FileUploadService } from '../../services/file-upload.service';

@Component({
  selector: 'app-upload-images',
  templateUrl: './upload-images.component.html',
  styleUrls: ['./upload-images.component.css']
})
export class UploadImagesComponent implements OnInit {
  selectedFiles?: FileList;
  selectedFileNames: string[] = [];

  progressInfos: any[] = [];
  message: string[] = [];

  previews: string[] = [];
  imageInfos?: Observable<any>;

  constructor(private uploadService: FileUploadService) {}

  ngOnInit(): void {
    this.imageInfos = this.uploadService.getFiles();
  }

  selectFiles(event: any): void {
    this.message = [];
    this.progressInfos = [];
    this.selectedFileNames = [];
    this.selectedFiles = event.target.files;

    this.previews = [];
    if (this.selectedFiles && this.selectedFiles[0]) {
      const numberOfFiles = this.selectedFiles.length;
      for (let i = 0; i < numberOfFiles; i++) {
        const reader = new FileReader();

        reader.onload = (e: any) => {
          console.log(e.target.result);
          this.previews.push(e.target.result);
        };

        reader.readAsDataURL(this.selectedFiles[i]);

        this.selectedFileNames.push(this.selectedFiles[i].name);
      }
    }
  }

  upload(idx: number, file: File): void {
    this.progressInfos[idx] = { value: 0, fileName: file.name };

    if (file) {
      this.uploadService.upload(file).subscribe(
        (event: any) => {
          if (event.type === HttpEventType.UploadProgress) {
            this.progressInfos[idx].value = Math.round(
              (100 * event.loaded) / event.total
            );
          } else if (event instanceof HttpResponse) {
            const msg = 'Uploaded the file successfully: ' + file.name;
            this.message.push(msg);
            this.imageInfos = this.uploadService.getFiles();
          }
        },
        (err: any) => {
          this.progressInfos[idx].value = 0;
          const msg = 'Could not upload the file: ' + file.name;
          this.message.push(msg);
        }
      );
    }
  }

  uploadFiles(): void {
    this.message = [];

    if (this.selectedFiles) {
      for (let i = 0; i < this.selectedFiles.length; i++) {
        this.upload(i, this.selectedFiles[i]);
      }
    }
  }
}

工作 Stackblitz 示例 here。