上传 angular 中的多张图片，预览包括图片名称

Question

在angular8中上传图片，我需要预览图片及其下每张图片的名称，预览成功并出现图片下的名称但其他图片不是同一张图片，所以名称与图像顺序打乱。

如有任何帮助，请在每张图片下方显示其名称。

HTML:

     <input class="btn btn-secondary" type="file" name="image" (change)="fileProgress($event)"
                    multiple="multiple" />



            <div class=" row" *ngIf="show_preview">
              <div class=" col-md-2 pr-md-1" *ngFor=" let j of previewUrl">
                <div class="image-preview mb-3">

                  <img [src]="j" height="100" />

                </div>
                <div *ngFor="let i of image">
                  <h6 style="text-align: center">{{ i.name }}</h6>
                </div>



TS:

fileProgress(fileInput: any) {
    this.fileData = new Array<File>();
    this.number_list = new Array<number>();
    this.previewUrl = new Array<string>();
    this.file_names = new Array<string>();
    this.image = new Array<Image>();
    console.log("after formating", this.previewUrl)//to check
    for (this.i = 0; this.i < fileInput.target.files.length; this.i++) {

     this.preview(fileInput.target.files[this.i]);

    }
    this.show_preview = true;
  }

   preview(file: any) {
    this._img = new Image();
    this._img.name = file.name;
    this.image.push(this._img);
    // Show preview 
    //this.image = new Image();
    var reader = new FileReader();
    reader.readAsDataURL(file);


  reader.onload = (_event: any) => {
    this.previewUrl.push(_event.target.result)

  }
  }

Answer 1

此代码有效

HTML:

   <input class="btn btn-secondary" type="file" name="image" (change)="fileProgress($event)" multiple="multiple" />

    <div class=" row" *ngIf="show_preview">
        <div class=" col-md-2 pr-md-1">
            <div class="image-preview mb-3" *ngFor=" let j of previewUrl">
                <img [src]="j.url" height="100" />
                <div >
                    <h6 style="text-align: center">{{j.imageName }}</h6>
                </div>
            </div>
        </div>
    </div>

TS:

fileProgress(fileInput: any) {
    this.fileData = new Array<File>();
    this.number_list = new Array<number>();
    this.previewUrl = new Array<string>();
    this.file_names = new Array<string>();
    this.image = new Array<typeof Image>();
    console.log("after formating", this.previewUrl)//to check
    for (this.i = 0; this.i < fileInput.target.files.length; this.i++) {
      this.preview(fileInput.target.files[this.i]);
    }
    this.show_preview = true;
  }

  preview(file: any) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (_event: any) => {
      this._img = new Image();
      this._img.name = file.name;
      this.image.push(this._img);
      const obj = {
        url: _event.target.result,
        imageName: this._img.name
      }
      this.previewUrl.push(obj);
      console.log('this.previewUrl', this.previewUrl);
    }
  }

上传 angular 中的多张图片，预览包括图片名称

uploading multiple images in angular with preview including names of images

image-uploading

angular

angular7

angular8