javascript - 如何在按钮单击时使用 Angular 使用 ng2-file-upload 获取文件值

Question

我在这里使用 ng2-file-upload 创建一个文件上传，我正在删除文件，通常我得到它的值(value)直到现在它很好现在我的问题甚至认为我放置了删除功能但是在删除文件之后我也想使用按钮单击功能检索文件上传值我该如何实现下面是我的代码

注意:这里需要获取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对象而不仅仅是它的名称属性。首先，将 Change the 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