angular - 通过带有表单数据和文件的Angular HttpClient上传文件，但multer不会获取文件

Question

我正在尝试使用图像文件上传我的表单数据。但是，我的 http 请求似乎有点偏离，因为它没有将文件传递到我的后端。要么，要么我的 multer 设置是“错误的”，因为它无法获取 req.file。（当我传递没有表单数据的 Http 请求时它正在工作）这是我的代码。谢谢你。

组件.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>

输入样式=“显示：无”类型=“文件”（更改）=“​​onFileChanged（$事件）”#fileInput>

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

组件.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]
  }

}

邮政服务

  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})
    }
})
})

标签： angularexpresshttpclientmulter

Answer 1

您应该将来自createPostobject 的所有输入放在 formDatauploadData中。将所有字段附加到 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)
  }