नोड / एक्सप्रेस फ़ाइल अपलोड


93

मैं नोड v0.10.26 और एक्सप्रेस v4.2.0 का उपयोग कर रहा हूं और मैं नोड के लिए बहुत नया हूं। मैं पिछले तीन या इतने घंटों से अपने डेस्क के खिलाफ अपना सिर पीट रहा हूं ताकि नोड के साथ काम करने वाले फाइल अपलोड फॉर्म प्राप्त करने की कोशिश की जा सके। इस बिंदु पर मैं बस req.files पाने की कोशिश कर रहा हूँ अपरिभाषित वापस नहीं। मेरा नज़रिया ऐसा दिखता है

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
  <h1>{{ title }}</h1>
  <p>Welcome to {{ title }}</p>
  <form method='post' action='upload' enctype="multipart/form-data">
    <input type='file' name='fileUploaded'>
    <input type='submit'>
  </form>
</body>
</html>

यहाँ मेरे मार्ग हैं

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

router.post('/upload', function(req, res){
console.log(req.files);
});

module.exports = router;

और यहाँ मेरा app.js है

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});



module.exports = app;

मैंने कहीं methodOverride()और देखा, जिसमें bodyParser({keepExtensions:true,uploadDir:path})मदद करना था और अगर मैं उन पंक्तियों को जोड़ूं तो मैं अपना सर्वर लॉन्च भी नहीं कर सकता था।



मैंने 4 के बजाय एक्सप्रेस 3 का उपयोग किया ताकि इसकी एपीआई को बदला जा सके, लेकिन मुझे लगता है कि आपको google / bing formidableऔर करने की आवश्यकता है express। AFAIK को आपको सक्षम करने की आवश्यकता है formiableजो मल्टीपर्ट फॉर्म डेटा से निपटने के लिए ज़िम्मेदार लेता है, फ़ाइलों को स्थानीय डिस्क में सहेजता है (जो uploadDirसाधन है) तो आप req.filesउन्हें पढ़ने और अपने व्यापार तर्क को संसाधित करने के लिए कुछ का उपयोग कर सकते हैं ।
शॉन जू

"Var bodyParser = आवश्यकता ('बॉडी-पार्सर') को हटाने का प्रयास करें;" और इसके बजाय कि bodyParser var का उपयोग कुछ इस तरह से करें: app.use (express.bodyParser ()); app.use (express.methodOverride ()); मेरे पास इस atm का परीक्षण करने का समय नहीं है ...
Canastro

यह देर से लेकिन भविष्य में किसी एक के लिए मददगार हो सकता है। यहाँ MongoDB साथ नोड js फ़ाइल अपलोड पर एक पूर्ण ट्यूटोरियल है programmerblog.net/nodejs-file-upload-tutorial
जेसन डब्ल्यू

यह लाइन किस लिए है app.use(express.static(path.join(__dirname, 'public')));
भूवैज्ञानिक

जवाबों:


94

एक्सप्रेसजेएस जारी:

अधिकांश मिडलवेयर को एक्सप्रेस 4 से हटा दिया जाता है। चेक आउट करें: http://www.github.com/senchalabs/connect#middleware मल्टीपार्ट मिडलवेयर जैसे बसबॉय, बसबॉय-कनेक्ट, दुर्जेय, प्रवाह के लिए, जुदा होना आवश्यक है।

यह उदाहरण कनेक्ट-बसबॉय मिडलवेयर का उपयोग करके काम करता है । / img और / सार्वजनिक फ़ोल्डर बनाएँ।
फ़ोल्डर संरचना का उपयोग करें:

\ server.js

\ img \ "जहां सामान अपलोड किया जाता है"

\ सार्वजनिक \ index.html

SERVER.JS

var express = require('express');    //Express Web Server 
var busboy = require('connect-busboy'); //middleware for form/file upload
var path = require('path');     //used for file path
var fs = require('fs-extra');       //File System - for file manipulation

var app = express();
app.use(busboy());
app.use(express.static(path.join(__dirname, 'public')));

/* ========================================================== 
Create a Route (/upload) to handle the Form submission 
(handle POST requests to /upload)
Express v4  Route definition
============================================================ */
app.route('/upload')
    .post(function (req, res, next) {

        var fstream;
        req.pipe(req.busboy);
        req.busboy.on('file', function (fieldname, file, filename) {
            console.log("Uploading: " + filename);

            //Path where image will be uploaded
            fstream = fs.createWriteStream(__dirname + '/img/' + filename);
            file.pipe(fstream);
            fstream.on('close', function () {    
                console.log("Upload Finished of " + filename);              
                res.redirect('back');           //where to go next
            });
        });
    });

var server = app.listen(3030, function() {
    console.log('Listening on port %d', server.address().port);
});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular file upload</title>
</head>

<body>
        <form method='post' action='upload' enctype="multipart/form-data">
        <input type='file' name='fileUploaded'>
        <input type='submit'>
 </body>
</html>

निम्नलिखित दुर्जेय SERVER.JS के साथ काम करेगा

var express = require('express');   //Express Web Server 
var bodyParser = require('body-parser'); //connects bodyParsing middleware
var formidable = require('formidable');
var path = require('path');     //used for file path
var fs =require('fs-extra');    //File System-needed for renaming file etc

var app = express();
app.use(express.static(path.join(__dirname, 'public')));

/* ========================================================== 
 bodyParser() required to allow Express to see the uploaded files
============================================================ */
app.use(bodyParser({defer: true}));
 app.route('/upload')
 .post(function (req, res, next) {

  var form = new formidable.IncomingForm();
    //Formidable uploads to operating systems tmp dir by default
    form.uploadDir = "./img";       //set upload directory
    form.keepExtensions = true;     //keep file extension

    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        console.log("form.bytesReceived");
        //TESTING
        console.log("file size: "+JSON.stringify(files.fileUploaded.size));
        console.log("file path: "+JSON.stringify(files.fileUploaded.path));
        console.log("file name: "+JSON.stringify(files.fileUploaded.name));
        console.log("file type: "+JSON.stringify(files.fileUploaded.type));
        console.log("astModifiedDate: "+JSON.stringify(files.fileUploaded.lastModifiedDate));

        //Formidable changes the name of the uploaded file
        //Rename the file to its original name
        fs.rename(files.fileUploaded.path, './img/'+files.fileUploaded.name, function(err) {
        if (err)
            throw err;
          console.log('renamed complete');  
        });
          res.end();
    });
});
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});

34
इसलिए हमारे पास एक ऐसा ढांचा है जो महत्वपूर्ण एपीआई को बदलता है और बुनियादी चीजों को बुरी तरह से जटिल बनाता है। और वह सबसे लोकप्रिय NodeJS मॉड्यूल है?
वॉर्टवार्ट

18
यह एक प्रमुख रिलीज है। Semver.org कल्पना के अनुसार प्रमुख रिलीज़ में ब्रेकिंग परिवर्तन की अनुमति है।
स्टुअर्ट पी। बेंटले

6
निश्चित semver.org प्रमुख संस्करण संख्याओं में एपीआई परिवर्तनों को तोड़ने की अनुमति देता है, लेकिन यह आपके उपयोगकर्ताओं को पेशाब करने का औचित्य साबित करने की कोशिश में एक भयानक बिंदु है।
joonas.fi

1
मैं एक्सप्रेस के साथ काम करने के लिए एक फ़ाइल अपलोड करने के लिए दिनों से संघर्ष कर रहा हूं। धन्यवाद!!!
aProperFox

1
एर, वास्तव में "बॉडीपेयर" क्या है और यह कहां से आता है? @ मिक
रॉबिन

27

एक अन्य विकल्प मल्टर का उपयोग करना है , जो हुड के नीचे बसबॉय का उपयोग करता है, लेकिन स्थापित करने के लिए सरल है।

var multer = require('multer');

मुल्टर का उपयोग करें और अपलोड के लिए गंतव्य निर्धारित करें:

app.use(multer({dest:'./uploads/'}));

आपके विचार में एक फॉर्म बनाएं, enctype='multipart/form-dataकाम करने के लिए मुल्टर की आवश्यकता है:

form(role="form", action="/", method="post", enctype="multipart/form-data")
    div(class="form-group")
        label Upload File
        input(type="file", name="myfile", id="myfile")

फिर अपने POST में आप फ़ाइल के बारे में डेटा एक्सेस कर सकते हैं:

app.post('/', function(req, res) {
  console.dir(req.files);
});

इस पर एक पूर्ण ट्यूटोरियल यहाँ पाया जा सकता है


4
मैं unknown fieldत्रुटि से निराश होने के बाद फॉर्म मल्टर को हटा रहा हूं । मेरे कोड में सब कुछ सही है। यह ज्यादातर समय तब रहस्यमय तरीके से काम करता है, इस अपवाद को सब कुछ उसी के साथ दिखाता है (पर्यावरण, फ़ाइल, कोड, फ़ाइल नाम)
kishu27

नए टाइप-थ्रर ('app.use () मिडलवेयर फ़ंक्शंस की आवश्यकता है) फेंकें;
क्रिस

आप इस तरह से सेटअप करना चाह सकते हैं यदि आप app.use `` var अपलोड = multer ({dest: 'uploads /'}) को multer फ़ंक्शन पास करने के साथ समस्याएँ हैं ; var app = express () app.post ('/ प्रोफाइल', upload.single ('फ़ील्ड-नेम'), function (req, res, next) {कंसोल.लॉग (req.file);}) `` `
Anibe Agamah

22

यहां मिक कलन के उत्तर का एक सरलीकृत संस्करण ( जिस्ट ) है - यह साबित करने के लिए कि इसे लागू करने के लिए बहुत जटिल होने की आवश्यकता नहीं है; जो पृष्ठ और कोड के पन्नों को पढ़ने में दिलचस्पी नहीं रखता है, उसके लिए एक त्वरित संदर्भ देने के लिए।


आपको ऐप -कनेक्ट-बसबॉय का उपयोग करना है :

var busboy = require("connect-busboy");
app.use(busboy());

जब तक आप इसे ट्रिगर नहीं करेंगे तब तक यह कुछ भी नहीं करेगा। अपलोड करने वाले हैंडल के भीतर, निम्नलिखित कार्य करें:

app.post("/upload", function(req, res) {
    if(req.busboy) {
        req.busboy.on("file", function(fieldName, fileStream, fileName, encoding, mimeType) {
            //Handle file stream here
        });
        return req.pipe(req.busboy);
    }
    //Something went wrong -- busboy was not loaded
});

चलो इसे तोड़ दो:

  • यदि आप req.busboyसेट है (मिडवेयर सही ढंग से लोड किया गया था)
  • आप एक "file"श्रोता की स्थापना करते हैंreq.busboy
  • आप पाइप की सामग्री reqके लिएreq.busboy

फ़ाइल श्रोता के अंदर कुछ दिलचस्प बातें होती हैं, लेकिन जो वास्तव में मायने रखती है fileStream: यह एक पठनीय है , जिसे तब एक फ़ाइल में लिखा जा सकता है, जैसे आप आमतौर पर लिखते हैं।

नुकसान: आपको इस पठनीय को संभालना चाहिए, या एक्सप्रेस अनुरोध का जवाब कभी नहीं देगा , बसबॉय एपीआई ( फाइल सेक्शन) देखें।


19

मुझे यह सरल और कुशल लगता है:

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

// default options
app.use(fileUpload());

app.post('/upload', function(req, res) {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  let sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

एक्सप्रेस-fileupload


एनपीएम पैकेज के साथ किसी और हाल के समाधान की तलाश में किसी को यहां देखना चाहिए। एक्सप्रेस-फाइलअप लोड वास्तव में आसान बनाता है।
जारेबस्ज़लर

4

मुझे दिए गए अन्य उत्तरों की तुलना में थोड़ा अधिक विस्तार के साथ चलना चाहिए (उदाहरण के लिए, मैं फ़ाइल को उस स्थान पर कैसे लिखूं जो मैं रनटाइम पर तय करता हूं?)। उम्मीद है कि यह दूसरों की मदद के लिए है:  

कनेक्ट-बसबॉय प्राप्त करें:

npm install connect-busboy --save

अपने server.js में, इन पंक्तियों को जोड़ें

let busboy = require('connect-busboy')

// ... 

app.use(busboy());

// ... 

app.post('/upload', function(req, res) {
    req.pipe(req.busboy);
    req.busboy.on('file', function(fieldname, file, filename) {
        var fstream = fs.createWriteStream('./images/' + filename); 
        file.pipe(fstream);
        fstream.on('close', function () {
            res.send('upload succeeded!');
        });
    });
});

यह त्रुटि से निपटने में चूक के लिए प्रतीत होता है ... अगर मुझे यह मिल जाए तो इसे संपादित कर दूंगा।


1

मुल्टर, मल्टीपार्ट / फॉर्म-डेटा को संभालने के लिए एक नोड। जेएस मिडलवेयर है, जिसका उपयोग मुख्य रूप से फाइलों को अपलोड करने के लिए किया जाता है। यह अधिकतम दक्षता के लिए बसबॉय के शीर्ष पर लिखा गया है।

npm install --save multer


in app.js

    var multer  =   require('multer');
    var storage = multer.diskStorage({
      destination: function (req, file, callback) {
        callback(null, './public/uploads');
      },
      filename: function (req, file, callback) {
        console.log(file);
        callback(null, Date.now()+'-'+file.originalname)
      }
    });

    var upload = multer({storage: storage}).single('photo');

    router.route("/storedata").post(function(req, res, next){

        upload(req, res, function(err) {
          if(err) {
            console.log('Error Occured');
            return;
          }
          var userDetail = new mongoOp.User({
            'name':req.body.name,
            'email':req.body.email,
            'mobile':req.body.mobile,
            'address':req.body.address
          });

          console.log(req.file);

          res.end('Your File Uploaded');
          console.log('Photo Uploaded');

          userDetail.save(function(err,result){
          if (err) {
            return console.log(err)
          }
          console.log('saved to database') 
        })
      })

      res.redirect('/')

    });

मल्ट्टर, मल्टीपार्ट / फॉर्म-डेटा को संभालने के लिए एक नोड। जेएस मिडलवेयर है, जिसका उपयोग मुख्य रूप से फाइल अपलोड करने के लिए किया जाता है। यह अधिकतम दक्षता के लिए बसबॉय के शीर्ष पर लिखा गया है।
विपिनलालव

बेहतर समझ के लिए मैंने आपके उत्तर को अपने टिप्पणी अनुभाग के साथ संपादित किया है, मुझे आशा है कि आपको कोई आपत्ति नहीं है: P
Peepeep Jain

1

यहाँ एक आसान तरीका है जो मेरे लिए काम करता है:

const express = require('express');
var app = express();
var fs = require('fs');

app.post('/upload', async function(req, res) {

  var file = JSON.parse(JSON.stringify(req.files))

  var file_name = file.file.name

  //if you want just the buffer format you can use it
  var buffer = new Buffer.from(file.file.data.data)

  //uncomment await if you want to do stuff after the file is created

  /*await*/
  fs.writeFile(file_name, buffer, async(err) => {

    console.log("Successfully Written to File.");


    // do what you want with the file it is in (__dirname + "/" + file_name)

    console.log("end  :  " + new Date())

    console.log(result_stt + "")

    fs.unlink(__dirname + "/" + file_name, () => {})
    res.send(result_stt)
  });


});

ओह वाह यह एक दिलचस्प कार्यान्वयन है। यह अलग फ़ाइल स्वरूपों के लिए ठीक काम करता है?
मेरुनास ग्रिंकलाइटिस

0

व्यक्तिगत रूप से मुलर इस फ़ाइल अपलोड बात को सही पाने की कोशिश करने के हफ्तों के बाद मेरे लिए काम नहीं किया। फिर मैं दुर्जेय पर स्विच करता हूं और कुछ दिनों के बाद मैंने इसे पूरी तरह से बिना किसी त्रुटि के काम किया, कई फाइलें, एक्सप्रेस और प्रतिक्रिया। हालांकि प्रतिक्रिया वैकल्पिक है। यहाँ गाइड है: https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s


0

यदि आप यहां Node.js एक्सप्रेस और टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो एक कार्यशील उदाहरण है, यह जावास्क्रिप्ट के साथ भी काम करता है, बस वेरिएंट को बदलने और आयात को शामिल करने के लिए आदि ...

पहले निम्न आयात करें सुनिश्चित करें कि आप निम्नलिखित कमांड चलाकर दुर्जेय स्थापित करते हैं:

npm install formidable

निम्नलिखित आयात करने से:

  import * as formidable from 'formidable';
  import * as fs from 'fs';

तब आपका कार्य बलो की तरह:

    uploadFile(req, res) {
    let form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
        let oldpath = files.file.path;
        let newpath = 'C:/test/' + files.file.name;
        fs.rename(oldpath, newpath, function (err) {
            if (err) throw err;
            res.write('File uploaded and moved!');
            res.end();
        });
    });
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.