Question

在这里我正在使用ng2-file-upload创建文件上传，在那里我要删除文件，通常我会得到它的价值，到现在为止还不错，现在我的问题甚至被认为是我放置了drop函数，但是在删除文件后我也想要使用按钮单击功能来检索文件上传值，如何在下面是我的代码？

注意：这里我需要获取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');
  }

}

url：https://stackblitz.com/edit/angular-s6g1v6

Answer 1

编辑：OP希望文件对象在组件范围内可用。代码已在下面修改。

存储整个File对象，而不只是存储其name属性。首先，将Change fileSelectState更改为and数组（或为此使用其他类成员）。然后将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

如何使用ng2-file-upload通过单击按钮时的角度获取文件值

1 个答案: