Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/28.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
angular4多文件上载第二组文件已清除_Angular - Fatal编程技术网

angular4多文件上载第二组文件已清除

angular4多文件上载第二组文件已清除,angular,Angular,我是新手 我使用多文件上传 <input #fileInput type="file" multiple="true" ngModel class="form-control" name="image[]" accept="image/png, image/jpeg, image/gif" id="image" (click)="fileInput.value = null;" (change)="onChange($event)"> } 我选择3个文件 再

我是新手

我使用多文件上传

      <input #fileInput type="file"  multiple="true" ngModel class="form-control" name="image[]" accept="image/png, image/jpeg, image/gif" id="image" 
  (click)="fileInput.value = null;" (change)="onChange($event)">
}

我选择3个文件

再次选择2个文件

控制台日志为:

在tmp_files变量中,文件集0被清除,在数组中,最后选择的两个文件仅可用

我不知道这是为什么。(文件集0-长度为0。文件集1的长度为2)。但在预览版中,我有5个领域。请帮助我第二次仅获取2个文件的原因是文件控件在您再次选择时重置其集合。如果需要多个文件,则需要一次性选择它们。Else获取文件并将其添加到本地集合,然后再次添加(您现在的操作是正确的)

2) 您在预览中看到5个文件的原因是,每次选择这些文件时,您都会在本地集合“this.filelist”中添加它们的详细信息。此集合在整个文件选择中保留(需要手动重置)

如果工作正常,只需获取添加到本地集合中的文件并使用它进行处理即可。代码中任何地方都没有问题(到目前为止)

<div *ngFor="let item of filelist; let i = index; " >
            <img  *ngIf="item != '' " id='img-upload' [src]="item"> 
 </div>
   onChange(event:any) {   


  //this.fupload = event.srcElement.files;  // not working in firefox
  this.fupload = event.target.files; 
// to get the files in array

  this.tmp_files.push(event.target.files);

  //console.log(event.target.files.length+' <> '+this.dind.length);
  this.urlval = event.target.files[0].name;




  for(let i=0; i< event.target.files.length; i++ ) {

    if (event.target.files && event.target.files[i]) {
      var reader = new FileReader();
      reader.onload = (event:any) => {
        this.url = event.target.result;
        this.filelist.push(this.url);

      }
      reader.readAsDataURL(event.target.files[i]);
    }
  }