无法将文件和表单数据一起从角度发送到节点 js 服务器答案

【问题标题】：unable to send file and form data together from angular to node js server无法将文件和表单数据一起从角度发送到节点 js 服务器
【发布时间】：2021-04-13 14:51:20
【问题描述】：

我正在创建一个注册页面，我希望用户在注册时上传图像，或者如果从仅角度文件或正文数据进入节点的时间发送帖子请求，他可以跳过它。我在一个请求中使用模板驱动形式的角度我想要两个

http服务文件``

import {  HttpClient, HttpHeaders } from '@angular/common/http';

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  httpOptions = {enter code here
    headers: new HttpHeaders({
      'Content-Type': 'appliction/JSON'
  })
}

  constructor(private http: HttpClient) { }
 
  register(data: any , Image: string | Blob){
   let fd = new FormData();
   fd.append('file', Image)
   //fd.append('data', data)
    
 
    console.log(data)
    
    return this.http.post("http://localhost:7860/signup",{data,fd})
  }

}




**req console (body) in nodejs**




body: {
    data: {
      profileImage: 'C:\\fakepath\\pexels-photo-248797.jpeg',
      name: 'Mandeep',
      email: 'mandeepjain00@gmail.com',
      Username: 'mk',
      date: '2021-01-16',
      password: 'Mandeep@545'
    },
    fd: {} //empty ..
  },

【问题讨论】：

我认为你必须做出选择。要么只使用 formData “，对于你的其他输入（并删除 json 头）或只使用 json （使用 filereader 从你的图像创建一个字符串）。另外，您实际上是如何调用注册函数并传入图像的？
我试过无法将数据和文件附加在一起。它只附加首先提供的内容
我已经这样做了几十次了。它工作正常。再次阅读我的评论..
在节点控制台请求中，它为 data =>> body: [Object: null prototype] { data: '[object Object]' }, route: Route { path: '/signup '，堆栈：[[Layer]，[Layer]]，方法：{post：true}}，

标签： node.js angular file-upload httprequest multer

【解决方案1】：

formdata 无法将对象保存在对象内，因此通过迭代每个表单控件数据和追加到 FormData 将在这种情况下起作用

点击提交按钮时调用的函数

onClickSubmit(data: any){  
    const formData = new FormData(); 
    for (const property in data) {
            //console.log(`${property}: ${data[property]}`);
            formData.append(`${property}` , `${data[property]} `)
    }
    
        formData.append('image', this.image)
    this._userSignup.register(formData)
    .subscribe( 
        data => {console.log(data),this._route.navigate(['login'])},
        error => console.log(error)
    )
}

user.service 文件

    import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'appliction/JSON'
  })
}

formData : String[] = new Array

  constructor(private http: HttpClient) { }
 
  register(formData: FormData){
   console.log(formData)
    return this.http.post("http://localhost:7860/signup",formData)
  }

}

【讨论】：