TypeScript：无法逐行迭代上载的文件（Angular 9）

Posted 2023-01-12

我想在Angular应用中逐行遍历用户上传的文件。我已经尝试过此answer中所述的方法，但是出现以下错误：

core.js：6260错误TypeError：this.firstfile.split不是函数或其返回值不可迭代在AppComponent.firstfileupload（app.component.ts：23）在AppComponent_Template_input_change_2_listener（app.component.html：2）在executeListenerWithErrorHandling（core.js：21815）在wrapListenerIn_markDirtyAndPreventDefault（core.js：21857）在HTMLInputElement。 （platform-b​​rowser.js：976）在ZoneDelegate.invokeTask（zone-evergreen.js：399）在Object.onInvokeTask（core.js：41640）在ZoneDelegate.invokeTask（zone-evergreen.js：398）在Zone.runTask（zone-evergreen.js：167）在ZoneTask.invokeTask [调用时]（zone-evergreen.js：480）

我的app.component.ts代码

import  Component  from '@angular/core';
import  HttpClient  from '@angular/common/http';


@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  firstfile=null;
  second_file = null;
  title = 'first';

  constructor(private http:HttpClient)

  

  firstfileupload(event)
    console.log("First file")
    console.log(event)
    this.firstfile=event.target.files[0]
    for(const line of this.firstfile.split(/[\r\n]+/))
      console.log(line)
    
    console.log("First file File has been changed")
  
  secondfile(event)
    this.second_file=event.target.files[0];
    // for(const line of this.second_file.split(/[\r\n]+/))
    //   console.log(line)
    // 
    console.log("Second file uploaded")
  
  onUpload()
    console.log("Upload button clicked")
    // const fd = new FormData();
    // fd.append('files',this.firstfile);
    // fd.append('files',this.second_file);
    // this.http.post('http://localhost:5000',fd).subscribe(res =>
    //   console.log(res)
    // 

    // )
  

并且对于app.component.html

<h1>Upload the files</h1>
<input type="file" (change)="firstfileupload($event)">
<input type="file" (change)="secondfile($event)">
<button type="button" (click)="onUpload()">Upload</button>

如何迭代上传的文件？我宁愿不保存文件，而仅在此处进行迭代。预先感谢。

答案

您可以尝试使用FileReader.readAsText()读取文件的内容。尝试以下操作

FileReader.readAsText()

import Component from '@angular/core'; import HttpClient from '@angular/common/http'; import Observable, Subject from 'rxjs'; export class AppComponent ... firstfileupload(event) this.firstfile = event.currentTarget.files[0]; this.readFileContent(event.currentTarget.files[0]).subscribe( content => for(const line of content.split(/[\r\n]+/)) if (line !== '') // <-- regex pattern might return an empty line at the EOF console.log(line); ); console.log("First file File has been changed") private readFileContent(file): Observable<any> let result = new Subject<any>(); // <-- Step 1: Create an empty RxJS `Subject` const reader = new FileReader(); // <-- Step 2: Create a `FileReader` object reader.onload = (e) => // <-- Step 5: Callback function to trigger on the evnet `onload` const fileContent = e.target.result; // <-- Step 6: `event.target.result` contains the file content result.next(fileContent); // <-- Step 7: Push the file contents to the `result` subject ; reader.readAsText(file); // <-- Step 3: Read the file using `FileReader`'s method `readAsText` return result.asObservable(); // <-- Step 4: Return the `result` subject 是FileReader的一部分。它包含以下基于各自操作触发的File API。

+ ------------ + ------------------------------------ ---------------------------- +|活动名称|当……时被解雇+ ------------ + ------------------------------------ ---------------------------- +| loadstart |读取开始时。 ||进展|读取（和解码）blob时||中止|当读取已中止时。 || |例如，通过调用abort（）方法。 ||错误读取失败时（请参阅文件读取错误）。 ||加载|读取成功完成时。 ||加载|请求完成后（成功或失败）。 |+ ------------ + ------------------------------------ ---------------------------- +

我们正在创建对象，并使用对events事件的回调函数来读取文件的内容。由于数据处理是异步的，因此我们使用RxJS Subject异步读取从函数load返回的数据。

您可以在此处了解有关异步数据的更多信息：readFileContent

另一答案

基于https://stackoverflow.com/a/14220323/6513921错误，您的问题是您正在尝试迭代对象（即文件），而不是其内容。

this.firstfile.split is not a function or its return value is not iterable

您需要使用firstfileupload(event) . . . this.firstfile=event.target.files[0] // <<<----- You recover the file. As OBJECT for(const line of this.firstfile.split(/[\r\n]+/)) // <<<--- You want to iterate the OBJECT like it is an STRING element . . . . . . 帮助器来迭代文件内容。

检查此：FileReader