>

Multer를 미들웨어로 사용하고 Express.json ()을 bodyParser로 사용하여 텍스트와 이미지가 포함 된 Angular 7 양식을 Node 백엔드에 제출하려고합니다. 양식 데이터는 프론트 엔드 제출에 있고 텍스트 데이터는 백엔드에 있지만 이미지 필드는 비어 있습니다 {}. bodyParse.json ()을 사용해 보았지만 결과는 동일합니다.

내 app.js 파일입니다

const express = require('express');
// const bodyParser = require('body-parser');
const adminController = require('./controllers/admin');
const path = require('path');
const cors = require('cors')
const app = express()
const FORM_URLENCODED = 'multipart/form-data';
app.use(cors())
... my mongodb connection string ...
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, X- Auth-Token')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')
  next();
});
// const bp = bodyParser.json()
// console.log('TCL: bp', bp);
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, 'images')));
// req is not defined?!?!?!?!?
app.use(() => {
  if (req.headers['content-type'] === FORM_URLENCODED) {
    let body = '';
    req.on('data', chunk => {
        body += chunk.toString(); // convert Buffer to string
    });
    req.on('end', () => {
        console.log(body);
        res.end('ok');
    });
  }
})
// -- multer
const multer = require('multer');
const crypto = require("crypto");
const imgDir = 'images';
const imgStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'images')
  },
  filename: function(req, file, callback) {
    crypto.pseudoRandomBytes(16, function(err, raw) {
      if (err) return callback(err);
      callback(null, raw.toString('hex') + 
path.extname(file.originalname));
    });
  }
});
const fileFilter = ((req, file, cb) => {
  // accept image only
  if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
    return cb(new Error('Only image files are allowed!'), false);
  }
  cb(null, true);
});
const upload = multer({dest: imgDir, storage: imgStorage, fileFilter: 
fileFilter, limits: {fileSize: 16000} }).array('image',20);
// app.use(
//   upload.fields([
//     { name: 'mainImg', maxCount: 1 },
//     { name: 'image', maxCount: 5 },
//   ])
// );
// -- end multer
app.post('/admin/add-product', function (req, res, next) {
  var path = '';
  upload({dest: imgDir, storage: imgStorage, fileFilter: fileFilter, 
limits: {fileSize: 16000} });
    path = req.file.path;
/// path is not defined!?!?!?!?
    return res.send("Upload Completed for "+path);
}, adminController.postAddProduct);
const userRoutes = require('./routes/user');
app.use('/user', userRoutes);
module.exports = multer;
module.exports.imgStorage = imgStorage;
module.exports = app;

각도 형태

<form [formGroup]="prodForm" (ngSubmit)="onSubmit()" enctype="multipart/form-data">
<div class="col-md-4">
      <label for="title"> <span class="required">*</span>Title: </label>
      <mat-form-field>
        <input class="form-control" matInput type="text" formControlName="title" #prodTitle />
        <mat-error *ngIf="prodForm.get('title').invalid">Please enter a title</mat-error>
      </mat-form-field>
    </div>
<div class="col-md-4">
      <div class="col-md-5">
        <button class="btn btn-success" mat-stroked-button type="button" (click)="filePicker.click()">
          Pick Image
        </button>
        <input type="file" #filePicker name="image" (change)="onImagePicked($event)" />
      </div>
      <div class="image-preview col-md-7" *ngIf="imgSrc !== '' && imgSrc">
        <img [src]="imgSrc" alt="{{ prodTitle.value }}" />
      </div>
    </div>
    <div class="col-md-12 sectButtons">
      <button class="btn btn-success" (click)="onShowStep2()">Next Step</button>
      <div class="clear"></div>
    </div>

각도 출력

image: File {name: "some-image.jpg", lastModified: 1552012800142, 
lastModifiedDate: Thu Mar 07 2019 21:40:00 GMT-0500 (Eastern Standard Time), webkitRelativePath: "", size: 42381, …}
title: "some title"

노드 컨트롤러 출력

TCL: exports.postAddProduct -> req.body { _id: '',
  title: 'some title',
  image: {}, }
TCL: exports.postAddProduct -> files undefined

내가 무엇을 놓치고 있습니까? 나는 이것을 알아 내려고 너무 많은 시간을 보냈다.


  • 답변 # 1

    req  req 객체를 정의하지 않았기 때문에 정의되지 않았습니다. 유효한 특급 middleware 가 아닙니다. . 로 변경

    // next is optional
    app.use((req, res, next) => {
      if (req.headers['content-type'] === FORM_URLENCODED) {
        let body = '';
        req.on('data', chunk => {
          body += chunk.toString(); // convert Buffer to string
        });
        req.on('end', () => {
          console.log(body);
          res.end('ok');
        });
      }
    })
    
    

관련 자료

  • 이전 netcat을 사용하여 서버에 8 바이트 길이를 전달 하시겠습니까?
  • 다음 symfony - symfony2 서비스에 SwiftMailer 주입