2

我有一个讨论论坛 webapp。用户发布问题的地方。我正在使用ng2-file-upload。正如我的论坛使用 *ngFor 循环列出的那样,每个讨论都有一个“评论”输入框,他们可以在其中很好地上传图片广告。由于图像是从相应的设备中选择的,我正在显示一个小预览图像。

当我选择图像时,它的预览会显示给每个对象。我基本上想要实现的图像上传和预览应该是各自的对象。下面是我试过的代码:

仪表板.html

<div class="replyInput">
  <textarea placeholder="Write a reply"></textarea>
  <div class="postimg" *ngFor="let item of commentImgUploader.queue">
       <img src="" imgPreview [image]="item?._file">
       <a (click)="removeFileFromQueue(item)" class="btnRemove">Remove</a>
  </div>
  <div class="uploadFile">
       <label for="uploadImgForComment">File</label>
       <input id="uploadImgForComment" name="uploadImg" type="file" ng2FileSelect [uploader]="commentImgUploader"
                             (change)="uploadFileChange()">
  </div>
  <input class="btn" value="submit" name="submit" type="submit">
</div>

仪表板.component.ts

export class DashboardComponent implements OnInit {

 /**Variables for Posting a new Discussion**/
  uploader: FileUploader = new FileUploader({}); //This is for question
  commentImgUploader: FileUploader = new FileUploader({});
   constructor(){}
   uploadFileChange() {}
}

在此处输入图像描述

我想在我选择的输入标签下方显示图像。

4

0 回答 0