如何使用 ng2-file-upload 使用 angular on button click 獲取文件值

Question

在這里，我正在使用 ng2-file-upload 創建文件上傳，我正在刪除文件，通常我正在獲取該文件的價值，直到現在它很好，現在我的問題甚至認為我放置了刪除功能，但在刪除文件后我也想檢索使用按鈕單擊功能的文件上傳值我如何在下面實現這是我的代碼

注意：這里我需要獲取 fileList 值

目前我使用 filedropped 方法獲取文件列表值，但同時使用按鈕單擊我需要獲取值

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';


const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  fileSelectState = {};
  formVisible = true;
  temp: any;

  public showInputForm: boolean = true;
  public selectAll: boolean = true;
  selectedAll: any;


  imga = "http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/Button-Upload-icon.png";

  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;
  public selectedFilesArray = [];
  private selectedFile;



    public selectFile(e: any): void {
    var target = e.target || e.srcElement || e.currentTarget;
    var value = target.innerHTML;
    this.selectedFile = value;
    this.selectAll = true;
    this.selectedFilesArray = [];
    this.selectedFilesArray.push(this.selectedFile);

  }
  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

    public selectAllFiles(e: any): void {

    this.selectedFilesArray = [];
    if (e.target.checked) {

      this.selectAll = true;

      for (var item in this.uploader.queue) {
        this.selectedFilesArray.push(this.uploader.queue[item].file.name);
      }
    }

    for (var item in this.uploader.queue) {
      this.fileSelectState[this.uploader.queue[item].file.name] = e.target.checked
    }


  }
 public fileDropped(fileList: any): void
  {
    for(var i =0 ; i< fileList.length; i++){
        this.fileSelectState[fileList[i].name] = true;
    }

  }

   public fileChecked(e: any): void {
    if (e.target.checked) {
      console.log(this.selectedFilesArray);
      this.selectedFilesArray.push(e.target.value);
      if (this.selectedFilesArray.length > 1) {

        this.selectedFile = e.target.value;


      }
      else {

        this.selectedFile = e.target.value;


      }

    }
    if (!e.target.checked) {

      var index = this.selectedFilesArray.indexOf(e.target.value, 0);
      if (index > -1) {
        this.selectedFilesArray.splice(index, 1);
        if (this.selectedFilesArray.length > 1) {


          this.selectedFile = this.selectedFilesArray[0];


        }
        else if (this.selectedFilesArray.length == 1) {

          this.selectAll = false;
          this.selectedFile = this.selectedFilesArray[0];


        }
        else if (this.selectedFilesArray.length == 0) {

          this.selectedFile = '';


        }
      }

    }



  }

  getInfo(){
    console.log('file info');
  }

}

網址： https : //stackblitz.com/edit/angular-s6g1v6

Answer 1

編輯：OP 希望 File 對象在組件范圍內可用。 代碼修改如下。

存儲整個File對象而不僅僅是它的 name 屬性。 首先，更改將fileSelectState更改為和數組（或為此使用不同的類成員）。 然后將fileDropped()方法更改為：

public fileDropped(fileList: any): void
  {
    for(var i =0 ; i< fileList.length; i++){
        this.fileSelectState.push(fileList[i]);
    }

  }

注意：如果您不必支持 IE，您可以將 for 循環替換為：

this.fileSelectState = Array.from(fileList);

改變：

getInfo(){
  console.log('file info');
}

到：

getInfo(){
  console.log(this.fileSelectState);
}

無論您在何處需要文件名，都可以使用以下命令：

this.fileSelectState[0].name