एक्सप्रेस 4.0 के साथ फाइल अपलोड: req.files अपरिभाषित

Question

मैं एक्सप्रेस 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');
        });
    });
});

Comments

यह कई फ़ाइलों के साथ कैसे काम करता है?

— चॉबी

@chovy यह कई फाइलों के साथ ठीक काम करना चाहिए

— mscdex

ithink करना संभव है। app.post ('/ fileupload', Busboy (), function (req, res) {

— Shimon Doodkin

अच्छा समाधान मैं सिर्फ यह नोट करना चाहता था कि आपको ./files/अपने ऐप की होम डायरेक्टरी में एक निर्देशिका बनानी होगी अन्यथा आपके अपलोड करने के बाद आपको एक त्रुटि मिलेगी।

— सॉस

अस्थायी फ़ाइलों को कैसे संभाला जाता है? क्या Busboy उन्हें स्वचालित रूप से हटा देता है? मैं बस कहीं भी नहीं देख रहा हूँ अस्थायी फ़ाइलों को डिस्क पर सहेजने से पहले हटाया जा रहा है।

— एड-टा

Answer 1

body-parserमॉड्यूल केवल JSON और urlencoded फ़ॉर्म सबमिशन बहुखण्डीय नहीं (जो मामला होगा अगर आपका अपलोडिंग फ़ाइलें) संभालती है।

मल्टीपार्ट के लिए, आपको connect-busboyया जैसे कुछ का उपयोग करने की आवश्यकता होगी ( multerया connect-multipartyमल्टीपार्टी / दुर्जेय है जो मूल रूप से एक्सप्रेस बॉडीपार मिडलवेयर में उपयोग किया गया था)। इसके अलावा एफडब्ल्यूआईडब्ल्यू, मैं बसबॉय के शीर्ष पर एक भी उच्च स्तर की परत पर काम कर रहा हूं जिसे कहा जाता है reformed। यह एक एक्सप्रेस मिडलवेयर के साथ आता है और इसे अलग से भी इस्तेमाल किया जा सकता है।

Comments

धन्यवाद, यह काम किया। हालांकि मुझे connect-busboyसिर्फ इसके बजाय उपयोग करना था busboy। समाधान के साथ मेरी मूल पोस्ट अपडेट की गई।

— सफ़रवचन

धन्यवाद दोस्त! मुझे connect-multipartyइनमें से सबसे अच्छा विकल्प लगता है !

— नेकी जू

है reformedविकसित की जा रही? गितुब पर आपकी अंतिम प्रतिबद्धता 2014 से है ... वैसे, आपकी राय में, मल्टीपर्ट फॉर्म डेटा को संभालने के लिए सबसे अच्छा मॉड्यूल क्या है? "सर्वश्रेष्ठ" से मेरा मतलब है कि सबसे अच्छा समर्थित और जो बेहतर काम करता है (कम बग), अधिक सुविधाओं के साथ और लंबे भविष्य के साथ..मैं multerइसलिए चुना क्योंकि यह सबसे अच्छा समर्थित लगता था, लेकिन मुझे अभी भी लगता है कि इसे और अधिक समर्थित होना चाहिए।

— 1

[संपादित करें: यह ठीक है, बस नीचे दिए गए उत्तर को देखा।] एक्सप्रेस 3.0 में मल्टीपार्ट किया और फिर 4.0 में टूट गया? मैं पूछता हूं क्योंकि यह ट्यूटोरियल 3.4.8 का उपयोग करता है और किसी भी अतिरिक्त मिडलवेयर ब्लॉग

— simple

@thetrystero वास्तव में उस विशेष उदाहरण के लिए जीथुब रेपो से जुड़ा हुआ है जिसमें रेपो में जांच की गई निर्भरताएं हैं। यदि आप उन निर्भरताओं के माध्यम से खुदाई करते हैं, तो आप देखेंगे कि एक्सप्रेस 3.x शामिल है, साथ ही कनेक्ट 2.x (जिसमें अभी भी एक मल्टीपार्ट मॉड्यूल इसके साथ बंडल था)। यही कारण है कि मल्टीपार्ट हैंडलिंग "बॉक्स से बाहर" काम कर रहा था।

— mscdex

Answer 2

यहाँ है कि मैं चारों ओर googling पाया:

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");


});

Comments

बड़ी फ़ाइलों के लिए बहुत धीमी

— एडुआर्डो

आपने उपयोग नहीं किया fileupload?

— ब्रांडनफ्लिन-एनबी

काम के उपरोक्त उत्तर के लिए, आपको अपने मुख्य में इन दो पंक्तियों को जोड़ने की आवश्यकता हैapp.js const fileUpload = require('express-fileupload') app.use(fileUpload())

— abhishake

Answer 3

ऐसा लगता है 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 } }

एक्सप्रेस-बसबॉय (एक्सप्रेस 4) console.log(req.files)का उपयोग करने की तुलना में :

{ 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' } }

Answer 4

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!!!');
});

Answer 5

multer एक मिडलवेयर है जो "मल्टीपार्ट / फॉर्म-डेटा" को हैंडल करता है और जादुई रूप से अपलोड की गई फाइलों और फॉर्म डेटा को हमें 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
});

उम्मीद है की यह मदद करेगा!

Answer 6

कृपया नीचे दिए गए कोड का उपयोग करें

app.use(fileUpload());

Comments

var फाइलअप लोड = आवश्यकता ("एक्सप्रेस-फाइलअप लोड"); app.use (fileupload ());

— सौरभ अग्रवाल

Answer 7

समस्या सुलझ गयी !!!!!!!

storageफ़ंक्शन को चालू करता है DID एक बार भी नहीं चलता है। क्योंकि मैं शामिल करने के लिए किया था 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');

Answer 8

express-fileupload एकमात्र मिडलवेयर जैसा दिखता है जो अभी भी इन दिनों काम करता है।

उसी उदाहरण के साथ, multerऔर req.file या req.filesconnect-multiparty का एक अपरिभाषित मान देता है , लेकिनexpress-fileupload काम करता है।

और req.file / req.files के खाली मूल्य के बारे में बहुत सारे सवाल और मुद्दे उठाए गए हैं ।