Question

我正在尝试将我的表单数据与图像文件一起上传。但是，我的http请求似乎有点过时，因为它没有将文件传递给我的后端。否则，或者我的multer设置“错误”，因为它将无法提取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>

输入样式=“ 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)
  }

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

1 个答案: