尝试将文件上传到后端时如何修复错误？

Question

我正在尝试使用将文件传递到 php 后端的服务将文件上传到服务器。它有效，但只有一次。如果我尝试重复上传另一个文件（不重新加载页面）它不会被发送并且会发生此错误：错误类型错误："this.fileManagerService.uploadFile is not a function"

playground.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input type="file" name="avatar" (change)="onFileSelect($event)" />
    <button type="submit">Upload</button>
</form>

playground.component.ts

export class PlaygroundComponent implements OnInit {

  form: FormGroup;
  fileManagerResponse;

  constructor(private formBuilder: FormBuilder, private fileManagerService: FileManagerService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      avatar: ['']
    });
  }

  onFileSelect(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.form.get('avatar').setValue(file);
    }
  }

  onSubmit() {
    const formData = new FormData();
    formData.append('avatar', this.form.get('avatar').value);

    this.fileManagerService.uploadFile(formData).subscribe(
      (res) => {
        this.fileManagerService = res;
          console.log(res);
      },
      (err) => {  
        console.log(err);
      }
    );
  }

}

FileManagerService.ts

export class FileManagerService {

  SERVER_URL: string = "http://127.0.0.1/backend/api/";

  constructor(private httpClient: HttpClient) { }

  public uploadFile(data) {
    let uploadURL = `${this.SERVER_URL}/filemanager/upload.php`;
    return this.httpClient.post<any>(uploadURL, data);
  }
}

Answer 1

错误发生在下一行。

this.fileManagerService = res;

您不能将 res 分配给 FileManagerService 的实例。去掉它。一切都会好起来的。

尝试将文件上传到后端时如何修复错误？

How to fix error when trying to upload file to backend?

php

angular-services

angular