От углового узла к бэкэнд-API - загрузка файла Multer, req.file не определен - PullRequest
Новая
       35

От углового узла к бэкэнд-API - загрузка файла Multer, req.file не определен

0 голосов
/ 16 марта 2019

У меня есть эта настройка в моем приложении -

angular 7 -> сервер узла -> API Springboot.

Есть несколько страниц в угловом приложении, которое отправляет json вAPI.Есть другие, которые должны отправить загруженный файл изображения.Я не могу отправить загруженное изображение на сервер узла и API.Мой фрагмент кода приведен ниже.В app.js req.body и req.file появляются как пустые и неопределенные соответственно.Я просматривал похожие вопросы на сайте, но не смог заставить мой код работать.Куда я иду не так?Любая помощь приветствуется. 

console.log(req.body); // form fields
console.log(req.file); // form files

Угловой код

module.component.html 

<input type="file" name="file-to-upload" (change)="onFileChanged($event.target.files)">

<div style="margin-top: 20px;">
  <button mat-raised-button type="button (click)="onSubmitCreateTemplate()">
    Submit
  </button>
  <button mat-raised-button color="primary" (click)="onCancel()">Cancel</button>
      </div>

module.component.ts 

export class ModuleComponent implements OnInit {
  ...

  onFileChanged(files: FileList) {
      this.fileName = files.item(0);
  }

  public onSubmitCreateTemplate() {
    this.moduleService.createTemplate(
        this.receiptForm.value['merchantID'] === null ? '' : this.receiptForm.value['merchantID'],
        "some string",
        'Draft',
        this.fileName
    ).subscribe(
        ...
    );
  }

moduleService.ts 

export class ModuleService {
    geHeaders() {
        const httpheaders = {
            headers: new HttpHeaders({
                'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
            })
        };
        return httpheaders;
    }

    createTemplate(merchantId: string, template: string, templateStatus: string, logoImageFile: File) {
        let headerInfo = this.geHeaders();
        const url = `${this.receiptTemplateUrl}`;

        let formData = new FormData();
        formData.append('file-to-upload', logoImageFile, logoImageFile.name);
        return this.http.post(url, formData, headerInfo);
    }
}

Узел-сервер

proxy-server.js 

const express = require('express');
const bodyParser = require('body-parser');
const http = require('http');
var multer = require("multer")
var upload = multer();

const app = express();
const httpServer = http.createServer(app);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// for parsing multipart/form-data
app.use(upload.array());
app.use(express.static('public'));

const appRoute = require('./server/routes/app');
app.use('/api', appRoute);

const port = process.env.PORT || 3000;
if (process.env.NODE_ENV === 'development') {
    httpServer.listen(port);
} else {
    // for integration and production
    httpServer.listen(3000);
}

app.js

Я не хочусохранить файл на диске, вместо этого нужно отправить его в бэкэнд API.Я попытался сохранить на диске, чтобы посмотреть, сохраняется ли файл.К сожалению, файл не сохраняется. 

const express = require('express');
const router = express.Router();
const request = require('request');
const { logger } = require('./../helpers/logger');
const mposLogger = logger('mppp');
var multer = require("multer")
    var storage = multer.diskStorage({
            destination: (req, file, cb) => {
            cb(null, 'uploads')
            },
            filename: (req, file, cb) => {
                cb(null, file.fieldname + '-' + Date.now())
            }
    });
    var upload = multer({storage: storage});
   router.route('/:serviceName/admin/receipt').post(upload.single("file-to-upload"), function(req, res, next){
        console.log(req.body); // form fields
        console.log(req.file); // form files
    });

    router.all('/:serviceName/*', (req, res) => {
        ...
    });

    module.exports = router;

API-интерфейс на SpringBoot 

@RestController
@RequestMapping("/admin")
public class TemplateController extends AbstractController  {

    ...

    @RequestMapping(path="/receipt",method= RequestMethod.POST)
    public IResponse createTemplate(@RequestHeader Map<String,String> header,
                               /*@Valid AddTemplateRequest request,*/
                               @RequestParam("file") MultipartFile imageFile) throws GenericException {

  ...
  }

Снимок экрана и ошибки

Это отправленные данные формыиз браузера.

На стороне сервера узла console.log (req.file) выводит «undefined».

...