Angular 7.2.3，通过“文件”发送发布数据。 （在Express中，通过“ req.files”识别该数据）

Question

我的Express API REST支持上传图像。

我使用Postman进行测试，并通过req.files收到了图片，现在在我的Angular项目中，默认情况下，图片是由req.body发送的。

我尝试设置标头'Content-type': 'multipart/form-data'，将observe设置为files（由于仅接受“ body”而出错），设置'Response-Type': 'blob' as 'json'和其他稀有事物。

我的Express功能是：

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，但在请求标头中始终显示Content-Type: application/json

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

  

我的实际问题：   

     

我期望：   

Answer 1

我的错误是默认设置在interceptor头中的标头，因为在我的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);
  }
}

如果有人发生同样的事情，我会留下它
希望您有个美好的一天，并祝您编程愉快❤️