Express 4.0으로 파일 업로드 : req.files undefined

나는 익스프레스 4.0 간단한 파일 업로드 메커니즘 작업을 진행하려고 해요하지만 난 점점 계속 undefined에 대한 req.files에 app.post몸. 관련 코드는 다음과 같습니다.

var bodyParser = require('body-parser');
var methodOverride = require('method-override');
//...
app.use(bodyParser({ uploadDir: path.join(__dirname, 'files'), keepExtensions: true })); 
app.use(methodOverride()); 
//...
app.post('/fileupload', function (req, res) {
  console.log(req.files); 
  res.send('ok'); 
}); 

.. 및 해당 퍼그 코드 :

form(name="uploader", action="/fileupload", method="post", enctype="multipart/form-data")
    input(type="file", name="file", id="file")
    input(type="submit", value="Upload")

솔루션 아래 mscdex
의 응답 덕분에 대신 다음 을 사용으로 전환했습니다 .busboybodyParser

var fs = require('fs');
var busboy = require('connect-busboy');
//...
app.use(busboy()); 
//...
app.post('/fileupload', function(req, res) {
    var fstream;
    req.pipe(req.busboy);
    req.busboy.on('file', function (fieldname, file, filename) {
        console.log("Uploading: " + filename); 
        fstream = fs.createWriteStream(__dirname + '/files/' + filename);
        file.pipe(fstream);
        fstream.on('close', function () {
            res.redirect('back');
        });
    });
});

이 body-parser모듈은 multipart가 아닌 JSON 및 urlencoded 양식 제출 만 처리합니다 (파일을 업로드하는 경우에 해당).

다중를 들어, 사용과 같은 것을 필요할 것 connect-busboy또는 multer나 connect-multiparty(다자간가 / 강력한 원래 명시 bodyParser 미들웨어에 사용 된 것입니다). 또한 FWIW, 나는이라는 버스 보이의 최상위 계층에서 작업하고 reformed있습니다. Express 미들웨어와 함께 제공되며 별도로 사용할 수도 있습니다.

내가 찾은 인터넷 검색 결과는 다음과 같습니다.

var fileupload = require("express-fileupload");
app.use(fileupload());

업로드를위한 매우 간단한 메커니즘입니다.

app.post("/upload", function(req, res)
{
    var file;

    if(!req.files)
    {
        res.send("File was not found");
        return;
    }

    file = req.files.FormFieldName;  // here is the field name of the form

    res.send("File Uploaded");


});

그것은처럼 보이는 body-parser 한 익스프레스 3에서 지원 업로드 파일을하지만,이 경우 지원 익스프레스 4 감소되지 않았다 더 이상 종속성으로 연결을 포함

mscdex의 답변에서 일부 모듈을 살펴본 결과 express-busboy훨씬 더 나은 대안이며 드롭 인 대체품에 가장 가까운 것으로 나타났습니다 . 내가 발견 한 유일한 차이점은 업로드 된 파일의 속성에 있습니다.

console.log(req.files)사용 체내 파서 (특급 3)의 출력과 같이 보인다고 개체 :

{ file: 
   { fieldName: 'file',
     originalFilename: '360px-Cute_Monkey_cropped.jpg',
     name: '360px-Cute_Monkey_cropped.jpg'
     path: 'uploads/6323-16v7rc.jpg',
     type: 'image/jpeg',
     headers: 
      { 'content-disposition': 'form-data; name="file"; filename="360px-Cute_Monkey_cropped.jpg"',
        'content-type': 'image/jpeg' },
     ws: 
      WriteStream { /* ... */ },
     size: 48614 } }

고속 버스 보이 를 console.log(req.files)사용 하는 것과 비교 (Express 4) :

{ file: 
   { field: 'file',
     filename: '360px-Cute_Monkey_cropped.jpg',
     file: 'uploads/9749a8b6-f9cc-40a9-86f1-337a46e16e44/file/360px-Cute_Monkey_cropped.jpg',
     mimetype: 'image/jpeg',
     encoding: '7bit',
     truncated: false
     uuid: '9749a8b6-f9cc-40a9-86f1-337a46e16e44' } }

1) 파일이 클라이언트 쪽에서 실제로 전송되었는지 확인하십시오. 예를 들어, 당신은 크롬 콘솔에서 확인할 수 있습니다 : 스크린 샷

2) NodeJS 백엔드의 기본 예는 다음과 같습니다.

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload()); // Don't forget this line!

app.post('/upload', function(req, res) {
   console.log(req.files);
   res.send('UPLOADED!!!');
});

멀터 는 "multipart / form-data"를 처리하고 마술처럼 & 업로드 된 파일 및 양식 데이터를 request.files 및 request.body로 요청하여 우리에게 제공하는 미들웨어입니다.

멀터 설치 :- npm install multer --save

.html 파일에서 :-

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="hidden" name="msgtype" value="2"/>
    <input type="file" name="avatar" />
    <input type="submit" value="Upload" />
</form>

.js 파일에서 :-

var express = require('express');
var multer = require('multer');
var app = express();
var server = require('http').createServer(app);
var port = process.env.PORT || 3000;
var upload = multer({ dest: 'uploads/' });

app.use(function (req, res, next) {
  console.log(req.files); // JSON Object
  next();
});

server.listen(port, function () {
  console.log('Server successfully running at:-', port);
});

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public/file-upload.html');
})

app.post('/upload', upload.single('avatar'),  function(req, res) {
  console.log(req.files); // JSON Object
});

도움이 되었기를 바랍니다!

아래 코드를 사용하십시오

app.use(fileUpload());

문제 해결됨 !!!!!!!

아웃 턴 storage기능은 한 번도 실행하지 않았다. 내가 app.use(upload)같이 포함해야했기 때문에upload = multer({storage}).single('file');

 let storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './storage')
          },
          filename: function (req, file, cb) {
            console.log(file) // this didn't print anything out so i assumed it was never excuted
            cb(null, file.fieldname + '-' + Date.now())
          }
    });

    const upload = multer({storage}).single('file');

express-fileupload 요즘 여전히 작동하는 유일한 미들웨어처럼 보입니다.

동일 예의 경우, multer및 connect-multiparty의 부정 값 제공 req.file 또는 req.files을 하지만express-fileupload 작품.

그리고 req.file / req.files 의 빈 값에 대해 제기 된 많은 질문과 문제가 있습니다.