Angular 7.2.3，"files"发送了post数据。（在 Express 中通过 "req.files" 回忆该数据）

Question

My Express API REST 支持上传图片。

我使用Postman进行测试，我通过req.files接收图像，现在在我的Angular项目中，图像默认通过req.body发送。

我尝试设置 header 'Content-type': 'multipart/form-data'，将观察设置为 files（出现错误，因为只接受 'body'），设置 'Response-Type': 'blob' as 'json' 和更多稀有的东西.

我的快递功能是：

exports.newPhoto = function(req, res) {
   if(!req.files || !req.files.imageAvatar) { 
            return res.status(300).json({
                status: 'fail', data: 'The request must have imageAvatar file'
            }) 
        }
        imageAvatar = req.files.imageAvatar
        name = imageAvatar.md5 + path.extname(imageAvatar.name)
        ...
}

在Angular项目中：

uploadImage(event) {
    /*upload-avatar.component.ts*/
    this.api.uploadPhoto(event.target.files[0]).subscribe(
    res => {
       ...
    }, err => {
      console.err(err);
    });
  }

/*api.service.ts*/
uploadPhoto(file: File) {
    const formData = new FormData();
    formData.append('imageAvatar', file, file.name);
    return this.http.post('http://localhost:3000/api/usuarios/imagen', formData);
  }

我检查了很多教程和这个页面的其他线程，代码总是一样的。
据说 Angular 应该将其视为 multipart/form-data 但在请求中 headers 总是显示 Content-Type: application/json

这里有一些图片来说明问题：

My actual problem:

I expeced:

Answer 1

我的错误是 默认设置 interceptor ‍♂ 中的 header，因为我的 API 中使用了 JWT 并且几乎所有的要求我都必须提出 'Content-type': 'application/json'

@Injectable()
export class JWTInterceptor implements HttpInterceptor {
  constructor(private authenticationService: AuthenticationService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const token = this.authenticationService.getToken();
    if (token) {
      req = req.clone({
        setHeaders: { Authorization: token }
      });
    }

    req = req.clone({
      setHeaders: {'Content-Type': 'application/json'}
    });

    return next.handle(req);
  }
}

我留下它以防有人遇到同样的情况
希望你今天过得愉快，编码愉快❤️

Angular 7.2.3，"files"发送了post数据。（在 Express 中通过 "req.files" 回忆该数据）

Angular 7.2.3, sent post data by "files". (In Express recolect that data by "req.files")

multipartform-data

express

angular

angular-httpclient

angular7

Angular 7.2.3，"files"发送了post数据。 （在 Express 中通过 "req.files" 回忆该数据）

Angular 7.2.3, sent post data by "files". (In Express recolect that data by "req.files")

multipartform-data

express

angular

angular-httpclient

angular7

Angular 7.2.3，"files"发送了post数据。（在 Express 中通过 "req.files" 回忆该数据）