我正试图上传一张带有angular的图像。
post-page.component.html

<input
[formControlName]="'file'"
id="file"
type="file"
class="form-control"
(change)="onFileChange($event)">

服务器

createPost(postPayload: CreatePostPayload): Observable<any> {
   ​return this.http.post('/api/v1/post/upload/', postPayload,
) }

`

post-page.component.ts

constructor(private router: Router, private postService: PostService, private toastr: ToastrService ) {
    this.postPayload = {
      picUrl: '',
      title: '',
      content: '',
      file:'',
      fileSource:'',
    }
  }
get f(){
    return this.createPostForm.controls;
  }
  onFileChange(event) {
    const reader = new FileReader();
    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageSrc = reader.result as string;
        this.createPostForm.patchValue({
          fileSource: reader.result
        });
      };
    }
    console.log(event);
  }
  createPost() {
    this.postPayload.picUrl = this.createPostForm.get('picUrl').value;
    this.postPayload.title = this.createPostForm.get('title').value;
    this.postPayload.content = this.createPostForm.get('content').value;
    this.postPayload.file = this.createPostForm.get('file').value;
    this.postPayload.fileSource = this.createPostForm.get('fileSource').value;
    this.postService.createPost(this.postPayload).subscribe((data) => {
      this.toastr.success("Okey.");
      this.router.navigateByUrl('home');

    }, error => {
      throwError(error);
    })
  }

请求有效载荷

{picUrl: "", title: "example", content: "example", file: "C:\fakepath\IMG-20181226-WA0003.jpg",…}
content: "example"
file: "C:\\fakepath\\IMG-20181226-WA0003.jpg"
fileSource: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA
picUrl: ""
title: "example"

如何修复c:\fakepath\问题。在图像上传过程中将其发送到服务器之前，是否需要将其保留在前端？