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

Question

我正在尝试通过使用将文件传递到php后端的服务将文件上传到服务器。 它有效，但是只有一次。 如果我尝试重复上传另一个文件（不重新加载页面），则不会发送该文件，并且会发生此错误：错误TypeError：“ this.fileManagerService.uploadFile不是函数”

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的实例。 去掉它。 一切都会好起来的。