圖片上傳與圖片顯示ＵＩ設計

<div class="flex justify-content-start">
        <label class="p-2">景點圖片紀錄：</label>
      </div>
      <div class="flex justify-content-start">
        <p-galleria [value]="images" [showIndicators]="true" [showIndicatorsOnItem]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'width': '640px' }" [numVisible]="5">
          <ng-template pTemplate="item" let-image>
            <img [src]="image.data" style="width: 100%; height: 500px" />
          </ng-template>
        </p-galleria>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">圖片紀錄:由下列選取圖片上傳．</label>
      </div>
      <div class="flex justify-content-start">
        <p-fileUpload #fileUpload [multiple]="true" [showUploadButton]="false" [fileLimit]="2" [auto]="false" accept="image/*" maxFileSize="1000000" STYLE="width: 700px">
          <ng-template pTemplate="content">
            <ul *ngIf="uploadedFiles.length">
              <li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
            </ul>
          </ng-template>
        </p-fileUpload>
      </div>

前端存取圖片資料

updatePicture() {
    if (this.articleId !== undefined && this.articleId !== null) {
      this.pictureService.getPictures(this.articleId.toString()).subscribe((imageDatas: ImageData[]) => {
        this.images = imageDatas;
      });
    }
  }

  onUpload($event: any) {
    const files: File[] = $event.files;
    if (this.articleId !== undefined && this.articleId != null) {
        this.pictureService.uploadPicture(files,this.articleId.toString()).subscribe((data: any) => {

          this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
          this.updatePicture();
        });
    }
  }

後端圖片處理

PictureController.get('/getPicturesByArticle/:IdArticle', (req, res) => {
  const idArticle = parseInt(req.params.IdArticle);
  if (isNaN(idArticle)) {
    return res.status(400).send('Invalid idArticle');
  }
  articleDao.findArticleFileStorage(idArticle).then((article:Article | null) => {
    let imageDatas: ImageData[] = [];
    if (article != null || article!.FileStorages != null) {
      article!.FileStorages!.forEach((fileStorage: FileStorage) => {
        if (fileStorage.storedFilename != null) {
          const filepath = path.join(Path + '/images/' + fileStorage.storedFilename);
          try {
            let value = fs.readFileSync(filepath, {encoding: 'base64'});
            let imageData: ImageData = {} as ImageData;
            imageData.id = fileStorage.id;
            imageData.originalFilename = fileStorage.originalFilename;
            imageData.data = `data:image/jpeg;base64,${value}`;
            imageDatas.push(imageData);
          }
          catch (e) {
            console.log(e);
          }
        }
      });
      return res.status(200).send(imageDatas);
    } else {
      return res.status(200).send([]);
    }
  });
});

執行結果