在文件数组Angular 4中获取文件

时间:2017-05-15 20:32:44

标签: angular typescript

我在html中有一个动态的文件输入,所以我在文件数组中添加每个文件

   tmp_files :File[] = [] ;

和HTML

 <div class="container">
 <input type="file" (change)="fileChange($event)" name="file" id="file" class="inputfile">
组件文件更改功能中的

看起来像这样

fileChange(event) {
this.tmp_files.push(event.target.files);}

并保存功能

save(){
 for (let i = 0; i < this.tmp_files.length; i++) {
        console.log("ccc",this.tmp_files[i]);

      }
}

所以在控制台日志中我得到文件enter image description here

所以现在我试图获取文件和文件名,我花了很多时间,我尝试了很多东西,但我无法解决这个问题,所以感谢帮助我获取文件和她的名字因为我想要将此文件发送给服务器再次感谢

1 个答案:

答案 0 :(得分:3)

您的File类型是第一个数字索引为File本身的对象。不确定这是怎么发生的,但是平坦化可能是一个好主意(或者也许那只是打字稿和浏览器打字,我不知道)。

你会像这样得到它:

save() {
  for (let i = 0; i < this.tmp_files.length; i++) {
        console.log('File:', this.tmp_files[i][0], 'Name:', this.tmp_files[i][0].name);
      }
}

或更严格的ES6标准:

save(filename: string) {
    const myFile = this.tmp_files.find(s => s[0].name === filename);
    // do stuff with MyFile
}