如何在Angular4中的fileSelect和fileUpload函数中打破onFileSelect？

I need to trigger upload files in fileUpload function, where I am able to use string to append to formData payload to something like this.

我需要在fileUpload函数中触发上传文件，在这里我可以使用string将formData有效负载追加到这样的东西。

"params": [ filepath+files[i].name, { "mode": "493" }]

and then do the upload which is happening in fileSelect function itself.

然后执行fileSelect函数本身发生的上传。

I am an Angular beginner.

我是一名Angular初学者。

.ts part of the component.

.ts组件的一部分。

constructor(
    protected ws: WebSocketService, protected http: Http, private loader: AppLoaderService,
    private dialog:DialogService, public snackBar: MatSnackBar) {

  }
fileUpload(filepath: string): void {
  //need help to trigger upload files in this function, 
  // where I am able to use string to append to formData 
  // payload to something like this.
  // "params": [ filepath+files[i].name, { "mode": "493" }]
  // and then do the upload which is happening in fileSelect fucntion itself.
  //
  // this.http.post(this.apiEndPoint, formData).subscribe(
  //   (data) => {
  //     this.loader.close();
  //     this.snackBar.open("your files are uploaded", 'close', { duration: 5000 })
  //   },
  //   (error) => {
  //     this.loader.close();
  //     this.dialog.errorReport(error.status, error.statusText, error._body);
  //   }
  // );


}
fileSelect(event: EventTarget) {
  this.loader.open();

  const eventObj: MSInputMethodContext = <MSInputMethodContext>event;
  const target: HTMLInputElement = <HTMLInputElement>eventObj.target;
  const files: FileList = target.files;

  const formData: FormData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
    formData.append('data', JSON.stringify({
      "method": "filesystem.put",
      "params": ["/tmp/"+files[i].name, { "mode": "493" }]
    }))
  }
  this.http.post(this.apiEndPoint, formData).subscribe(
     (data) => {
       this.loader.close();
       this.snackBar.open("your files are uploaded", 'close', { duration: 5000 })
     },
     (error) => {
       this.loader.close();
       this.dialog.errorReport(error.status, error.statusText, error._body);
     }
   );
}

.html part of the component.

.html组件的一部分。

 <mat-card-content>
    <input type="file" (change)="fileSelect($event)" placeholder="select a file to Upload" accept=".iso">
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" (click)="fileUpload()">Upload</button>
  </mat-card-actions>

2 个解决方案

#1

You have your this.http.post code in your fileSelect method which is why it is happening straight after you select a file.

你在fileSelect方法中有你的this.http.post代码，这就是你选择文件后直接发生的原因。

Extract that out into your fileUpload method.

将其解压缩到您的fileUpload方法中。

Declare the formData outside of the function as a property of the component so you can access it from the fileUpload method.

将函数外部的formData声明为组件的属性，以便可以从fileUpload方法访问它。

private formData: FormData;

#2

I did some more digging into other approaches as well, the answer was way simpler than I was expecting,
I had created a template reference variable called
<input type="file" #fileInput accept="{{config.acceptedFiles}}"> and access that variable in component export class FormUploadComponent { @ViewChild('fileInput') fileInput; ..... upload(location = "/tmp/") { const fileBrowser = this.fileInput.nativeElement; ...... } the keys is to use @ViewChild('fileInput') fileInput; and access it throughout the component.

我还做了一些其他方法，答案比我想象的要简单，我创建了一个名为并在组件导出类中访问该变量FormUploadComponent {@ViewChild（'fileInput'）fileInput; ..... upload（location =“/ tmp /”）{const fileBrowser = this.fileInput.nativeElement; ......}键是使用@ViewChild（'fileInput'）fileInput;并在整个组件中访问它。

#1