загрузить файл через Angular HttpClient с данными формы и файлом, но multer не получит файл

Question

Я пытаюсь загрузить данные формы с файлом изображения. Тем не менее, мой http-запрос выглядит немного не так, так как он не передает файл в мой бэкэнд. Либо так, либо моя настройка мультитера "неправильная", так как он не сможет получить req.file. (Это работало, когда я передаю запрос HTTP без данных формы) Вот мой код. Спасибо.

component.html

<div class="container" id="createPost">
<form (submit)="createPostx()" enctype="multipart/form-data">
    <input type="text" name= createPost.title [(ngModel)]= createPost.title placeholder="title">
    <input  type="textarea" name= createPost.desc [(ngModel)] = createPost.desc placeholder="description">
    <input  type="text" name= createPost.image [(ngModel)] = createPost.image placeholder="image link">
    <input  type="number" name= createPost.price [(ngModel)] = createPost.price placeholder="price">
    <input type="submit" value="Post">
</form>

input style = "display: none" type = "file" (change) = "onFileChanged ($ event)" #fileInput>

button (click)="fileInput.click()">Select File</button>

component.ts

export class ListingComponent implements OnInit {
  createPost= {};
  selectedFile: File = null;
  images: Array<any>

  constructor(
    private _postService: PostService,
    private _router: Router
    ) { }

  ngOnInit() {
  }

  createPostx(){
    const uploadData = new FormData();
    uploadData.append('image', this.selectedFile, this.selectedFile.name);
    this._postService.createPost(this.createPost, uploadData)
    .subscribe(result=>{
    this._router.navigate(["frontPage/listing"])
    })
  }

onFileChanged(event) {
    this.selectedFile = event.target.files[0]
  }

}

post.service

  createPost(post,image){
    return this._http.post('/createPost', [image, post])
  }

бэкенд

app.post("/createPost", upload.single('image'),function(req,res){
console.log(req)
post = Post(req.body);
post._user = req.session.user._id
post.save(function(err, post){
    if(err){
        console.log(err)
        res.json({error:err})
    }
    else{
        console.log("success")
        res.json({result:post})
    }
})
})

Answer 1

Вы должны поместить все входные данные из createPost объекта внутри formData uploadData. Добавьте все свои поля в FormData, а затем отправьте в сервис.

<div class="container" id="createPost">
<form (submit)="createPostx()" enctype="multipart/form-data">
    <input type="text" name= createPost.title [(ngModel)]= createPost.title placeholder="title">
    <input  type="textarea" name= createPost.desc [(ngModel)] = createPost.desc placeholder="description">
    <input  type="text" name= createPost.image [(ngModel)] = createPost.image placeholder="image link">
    <input  type="number" name= createPost.price [(ngModel)] = createPost.price placeholder="price">
    <input style="display: none" type="file" (change)="onFileChanged($event)" #fileInput>
    <button (click)="fileInput.click()">Select File</button>
    <input type="submit" value="Post">
</form>

export class ListingComponent implements OnInit {

  createPostx(){
    const uploadData = new FormData();
    uploadData.append('title', this.createPost.title);
    uploadData.append('desc', this.createPost.desc);
    uploadData.append('price', this.createPost.price);
    uploadData.append('image', this.selectedFile, this.selectedFile.name);
    this._postService.createPost(uploadData)
    .subscribe(result=>{
    this._router.navigate(["frontPage/listing"])
    })
  }

  onFileChanged(event) {
    this.selectedFile = event.target.files[0]
  }

}

createPost(post: FormData){
    return this._http.post('/createPost', post)
  }