复制并粘贴文件内容以将其上传到 Angular 9？

Question

我有一个 Angular 用户上传两个文件并将文件发送到服务器进行处理和服务器 returns 结果。但我想要一个功能，我可以有两个文本框，用户可以只复制粘贴两个文件的内容，而不是浏览和上传文件。我有以下代码：

app.component.html

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstfile=null;
  second_file = null;
  title = 'first';
  first_content:any
  content_updated:boolean=false;

  constructor(private http:HttpClient){
    this.content_updated=false;

  }

  firstfileupload(event){
    console.log("First file")
    // console.log(event)
    this.firstfile=event.target.files.item(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("Control reached here")
    this.content_updated=true;
    if(this.content_updated===true){
      console.log(this.first_content)
    }
  }
  secondfile(event){
    this.second_file=event.target.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("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)
    }

    )
  }
  private readFileContent(file): Observable<any> {
    let result = new Subject<any>();

    const reader = new FileReader();
    reader.onload = (e) => {
      const fileContent = e.target.result;
      result.next(fileContent);
    };
    reader.readAsText(file);

    return result.asObservable();
  }
}

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>
</div>

如您所见，我只是将用户的输入作为文件发送给用户。我怎样才能让用户只需将内容复制粘贴到文本区域并将内容作为文件发送到服务器。提前致谢。

P.S：请忽略所有额外的代码，我的重点是如何获取用户输入、转换为文件并将其发送到服务器。在上面的代码中，我没有任何与我的问题相关的逻辑，我只是接受文件输入。

Answer 1

HTML :-

<div> Input Text Below </div>
<textarea id="fileData" [(ngModel)]="data"></textarea>
<button (click)="sendData()">Send Data</button>

在 Ts :-

public data = '';
public sendData() {
  this.http.post('http://localhost:5000',this.data).subscribe(res =>{
      console.log(res)
  });
}

在Ts中如果需要作为文件发送

public data = '';
    public sendData() {
      var blob = new Blob(["This is my first text."], {type: "text/plain;charset=utf-8"});
      var formData = new FormData();
      formData.append('file',blob);
      this.http.post('http://localhost:5000',formData).subscribe(res =>{
          console.log(res)
      });
    }

复制并粘贴文件内容以将其上传到 Angular 9？

Copy and Paste the contents of a file to Upload it in Angular 9?

javascript

typescript

angular

angular9