node.js - node.js multer - req.file 未定义

Question

带有 multer 中间件的 node/express 后端服务器无法使用从带有 http 拦截器的 angular7/http 客户端上传的 multipart/form-data 图像文件。

使用以下代码在服务器上发布 api 报告req.file 未定义
服务器 - node.js/express/multer

使用客户端上传图像文件 - Angular 7 ->component ->uploadsrvice(@angular/common/http) ->http 拦截器
````

    node.js api server code

    const express = require('express');
    const cors = require('cors');
    let appiu = express();
    appiu.use(cors({origin: tru }));
    appiu.use('/', function (req, res, next) { 
        console.log('req.headers --->', req.headers);
      next();
    })
    const multer = require('multer');
    var mstorage1 = multer.diskStorage({
        destination: function (req, file, cb) {
            console.log("reached multer");
          cb(null, './keys/images/');
        },
        filename: function (req, file, cb) {
            console.log("reached multer",file.originalname);
          cb(null, Date.now() + file.originalname);
        }
      });

    var upload1 = multer({    storage: mstorage1}).single('image');

     appiu.post('/photos/image-upload',
       function (req, res) {

        upload1(req,res,function(err){
            console.log("req.file", req.file);
            console.log("req.files", req.files);
            if(err){
                 res.json({error_code:1,err_desc:err});
                 return;
            }
             res.json({error_code:0,err_desc:null});
        });

      });

````

console.log('req.headers --->', req.headers); 报道

 ````

    { 'accept-language': 'en-US,en;q=0.9',
      'accept-encoding': 'gzip, deflate, br',
      referer: 'http://localhost:4200/upload',
      'sec-fetch-site': 'same-site',
      origin: 'http://localhost:4200',
      'content-type':
      'multipart/form-data; boundary=----WebKitFormBoundaryc8BWedVBAK9DP0Ng', 
      'sec-fetch-mode': 'cors',
      'user-agent':
       'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36',
      accept: 'application/json, text/plain, */*',
      'content-length': '166498',
      connection: 'close',
      host: 'localhost:5000' }

````

console.log("req.file", req.file); console.log("req.files", req.files);

reports 

信息：req.file 未定义
信息：req.files 未定义

感谢任何帮助解决 服务器上req.file不可用的原因。
这是客户端代码

````

    onSubmit() {
        const formData = new FormData();
        formData.append('name', this.profileForm.get('name').value);
        formData.append('profile', this.profileForm.get('profile').value);

         this.fileUploadService.upload(formData);

      }
    // angular http call service 
    return this.http.post<any>(`${this.apiUrl}`, formData, {
                reportProgress: true,
                observe: 'events'
            }).
                subscribe((event: HttpEvent<any>) => {
                    switch (event.type) {
                        case HttpEventType.Sent:
                            console.log('Request sent!');
                            break;
                        case HttpEventType.ResponseHeader:
                            console.log('Response header received!');
                            break;

                        case HttpEventType.Response:
                            console.log('Http post  Done!', event.body);
                        case HttpEventType.UploadProgress:
                            return this.fileUploadProgress(event);
                        case HttpEventType.Response:
                            return this.apiResponse(event);

                        default:
                            return `File "${formData.get('profile').name}" surprising upload event: ${event.type}.`;

                    }
                });

//http interceptor


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

            console.log("http request intercepted by HttpConfigInterceptor"+JSON.stringify(request.headers));
            // lets add the base url first.





            if (request.body instanceof FormData) {
                // we are sending a file here
                console.log("sending a multipart/form-data");

              }
            if (request.url.indexOf('photos/image-upload') == 0) {

                console.log('photos/image-upload true')
                request = request.clone({ url: `${environment.rootUrlIU}/${request.url}` });



            }
            else {
                request = request.clone({ url: `${environment.rootUrl}/${request.url}` });
            }

            return next.handle(request)
                .pipe(
                    map((event: HttpEvent<any>) => {
                        if (event instanceof HttpResponse) {
                            console.log('HttpConfigInterceptor response event--->>>', event);

                        }
                        return event;
                    }),
                    catchError((error: HttpErrorResponse) => {
                        let data = {};
                        data = {
                            reason: error && error.error && error.error.reason ? error.error.reason : '',
                            status: error.status
                        };




                        return throwError(error);
                    }));
        }
````

    enter code here

Any help highly appreciated.. thank you.

标签： node.jsangularfile-uploadmulter