web-dev-qa-db-ja.com

Angular-ファイルを読み取り、その内容を解析します

以下のように、選択したファイルを保持するファイルアップロードコントロールがあります。

<div class="Block">
  <label id="lbl">File </label>
  <input #fileInput type='file'/>
</div>

以下のような送信ボタンがあります。

<button type="button" class="btn btn-primary" 
     (click)="uploadDocument()">Upload File</button>

ファイルを選択してアップロードボタンをクリックすると、ファイルをサーバーに送信してそこから読み取ることなく、ファイル内のコンテンツが必要になります。

注：ファイルのタイプはcsvになります

angularangular5
27
Karthik

JavaScriptでFileReaderを使用して、csvファイルとしてこれを実現できます。

ファイル変更イベントを追加して、次のようにオブジェクトにファイルを保存します。

<div class="Block">
  <label id="lbl">Code </label>
  <input type='file' (change)="fileChanged($event)">

</div>

関数は、後で使用されるオブジェクトにファイルを設定する必要があります

file:any;
fileChanged(e) {
    this.file = e.target.files[0];
}

送信ボタンをクリックすると、javascriptのFileReaderのreadAsText()メソッドを使用して、以下のようにコンテンツを取得できます。

uploadDocument(file) {
    let fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
}

注：onloadイベントはコンテンツが読み取られた後に発生するため、ロジックはonLoad関数内にある必要があります。

40
Aravind

入力からファイルを引き出し、FileReader APIを使用します

readFile(file: File) {
    var reader = new FileReader();
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}
6
bryan60

読み取り後に文字列データを取得する方法を尋ねる場合、データはresultのfileReaderプロパティにあります。以下のコードサンプルを確認してください。

    let fileString:any= "";

    uploadDocument(file) {
        let fileReader = new FileReader();
        fileReader.onloadend = (e) => {
           //console.log(myReader.result);
           // Entire file
           console.log(myReader.result);

           // By lines
           var lines = myReader.result.split('\n');
           for(var line = 0; line < lines.length; line++){
               console.log(lines[line]);
           }

           this.fileString = myReader.result;
        };

        fileReader.readAsText(this.file);
    }
0
katwekibs