Question

我尝试从prime-ng库中读取使用组件p-fileUpload上传的文件。

我的HTML组件：

<h3 class="first">Deposer le fichier Excel</h3>
<p-fileUpload name="myfiles[]"
              chooseLabel="Choix du fichier"
              uploadLabel="Consulter les données"
              cancelLabel="Annuler"
              accept=".csv"
              maxFileSize="1000000"
              auto="auto"
              customUpload="true"
              (uploadHandler)="myUploader($event)">
  <ng-template pTemplate="toolbar">
    <p-button label="Consulter les données" icon="fa fa-upload" iconPos="left" (onClick)="myUploaderEnd($event)"></p-button>
  </ng-template>
  <ng-template pTemplate="content">

  </ng-template>
</p-fileUpload>

<p *ngIf="refletOrdres.length > 1">{{refletOrdres[2].reference}}</p>
<p>{{debug}}</p>

我的TypeScript组件：

import { Component, OnInit } from '@angular/core';
import {Message} from "primeng/api";
import {RefletOrdre} from "../../shared/refletordre";
import {RefletordreService} from "../../services/refletordre.service";
import {Routes, RouterModule, Router} from '@angular/router';

@Component({
  selector: 'qa1-fichier',
  templateUrl: './fichier.component.html',
  styleUrls: ['./fichier.component.css']
})
export class FichierComponent implements OnInit {
  refletordreService: RefletordreService = new RefletordreService();
  uploadedFiles: any[] = [];
  fileBuffer:string = "";
  fileLines:string[] = [];
  refletOrdres:RefletOrdre[] = new Array<RefletOrdre>();
  debug: string = "";
  file: File;

  constructor(private router: Router) { }

  ngOnInit() {
  }


  myUploader(event) {
    for(let file of event.files) {
      this.uploadedFiles.push(file);
    }
  }

  myUploaderEnd(event) {
    this.readFile(this.uploadedFiles[0]);
    //this.refletOrdres = this.refletordreService.populateRefletOrdres(this.fileLines);
    this.debug = this.uploadedFiles[0].name+"----"+this.fileBuffer;
  }

  readFile(file: File) {

    var reader = new FileReader();
    reader.onload = () => {
      this.fileBuffer+=reader.result;
    };
    reader.readAsText(file);
    this.fileLines = this.fileBuffer.split("\n");
  }

}

我第一次点击调用该函数的按钮：myUploaderEnd我没有任何数据，fileBuffer的值为null。第二次我点击同一个按钮，我在变量中有值...

我想在第一次点击时从文件中读取数据，我不解释为什么我需要点击两次。

谢谢。

Answer 1

这就是我在p-fileupload中读取文件的方式：

html文件：

<p-fileUpload 
    [files]="externalFiles" 
    #uploader 
    [multiple]="false" 
    accept="image/*" 
    maxFileSize="1000000" 
    [showUploadButton]="false"
    [showCancelButton]="false" 
    (onSelect)="onSelectImage($event.files)" 
    (onRemove)="onRemoveImage($event)">
</p-fileUpload>

TS文件：

public onSelectImage(evt: any) {
   this.uploadedFile = evt[0];
}

您应该可以从evt[0]

获取上传的文件

Answer 2

在调试期间，reader.onload事件是代码的最后一部分，因此...

  export class FichierComponent {
  uploadedFiles: any[] = [];
  fileBuffer:string = "";
  fileLines:string[] = [];
  debug: string = "";
  file: File;
  reader: FileReader;

  constructor(private router: Router,private importService: ImportService ) {
    this.importService.setActiveIndex(0);
    this.reader = new FileReader();
    this.reader.onload = () => {
      this.fileBuffer=this.reader.result;
      this.fileLines = this.fileBuffer.split("\n");
      this.debug += ""+this.uploadedFiles[0].name+"----"+this.fileBuffer+"!!!!!!";
      this.importService.setActiveIndex(1);
      this.router.navigate(["/app/import/consulter"]);
    };

  }

  myUploader(event) {
    for(let file of event.files) {
      this.uploadedFiles.push(file);
    }
  }

  myUploaderEnd(event) {
    this.readFile(this.uploadedFiles[0]);
  }

  readFile(file: File) {
    this.reader.readAsText(file);
  }

p-fileUpload：上传后如何读取文件

2 个答案: