নোড / এক্সপ্রেস ফাইল আপলোড


96

আমি নোড 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 ব্যবহার করেছি যাতে এর এপিআই পরিবর্তন হতে পারে তবে আমার মনে হয় আপনার গুগল / বিং formidableএবং করা দরকার express। এএআইএআইএকি আপনাকে সক্ষম করতে হবে formiableযা মাল্টিপার্ট ফর্ম ডেটা নিয়ে কাজ করার জন্য দায়ী করে, স্থানীয় ডিস্কে ফাইলগুলি সংরক্ষণ করে (যার uploadDirঅর্থ) তবে আপনি req.filesসেগুলি পড়তে এবং আপনার ব্যবসায়ের যুক্তি প্রক্রিয়াকরণের মতো কিছু ব্যবহার করতে পারেন ।
শন শো

"Var বডি পার্সার = অপরিহার্য ('বডি-পার্সার') অপসারণ করার চেষ্টা করুন;" এবং সেই বডি পার্সার ভার ব্যবহার না করে এই জাতীয় কিছু ব্যবহার করুন: অ্যাপ্লিকেশন; ইউস (এক্সপ্রেস.ওডি পার্সার ()); app.use (এক্সপ্রেস.মোথডওভারাইড ()); এই এটিএম পরীক্ষার জন্য আমার কাছে সময় নেই ...
ক্যানাস্ট্রো

এটি দেরিতে তবে ভবিষ্যতে কারও জন্য সহায়ক হতে পারে। এখানে নং জেএস ফাইল আপলোড সম্পর্কিত একটি সম্পূর্ণ টিউটোরিয়ালটি মঙ্গডব প্রোগ্রামারব্লগ.
জেসন ডব্লিউ

এই লাইনটি কিসের জন্য? app.use(express.static(path.join(__dirname, 'public')));
জিওএডসিক

উত্তর:


94

এক্সপ্রেসজেএস ইস্যু:

মিডলওয়্যার অধিকাংশই আউট দ্রুতগামী 4. চেক থেকে সরানো হয়: http://www.github.com/senchalabs/connect#middleware busboy মত একাধিক মিডলওয়্যার জন্য, busboy-সংযোগ করেন, দুর্দান্ত, প্রবাহ, বিভক্ত প্রয়োজন হয়।

এই উদাহরণটি কানেক্ট-বাসবয় মিডলওয়্যার ব্যবহার করে কাজ করে । / img এবং / সর্বজনীন ফোল্ডার তৈরি করুন।
ফোল্ডার কাঠামো ব্যবহার করুন:

। server.js

\ img \ "যেখানে স্টাফ আপলোড করা হয়"

\ সর্বজনীন \ index.html

সার্ভার.জেএস

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

35
সুতরাং আমাদের একটি কাঠামো রয়েছে যা অত্যাবশ্যকীয় API গুলি পরিবর্তন করে এবং মৌলিক বিষয়গুলিকে মারাত্মক জটিল করে তোলে। এবং এটি সবচেয়ে জনপ্রিয় নোডজেএস মডিউল?
ওয়ার্টওয়ার্ট

19
এটি একটি প্রধান মুক্তি। সেমভার.অর্গ স্পেস অনুযায়ী প্রধান প্রকাশে ব্রেকিং পরিবর্তনগুলি অনুমোদিত changes
স্টুয়ার্ট পি। বেন্টলে

6
অবশ্যই semver.org প্রধান সংস্করণ সংখ্যাগুলিতে এপিআই পরিবর্তনের অনুমতি দেয়, তবে এটি আপনার ব্যবহারকারীদেরকে ক্ষমা করে দেওয়ার পক্ষে বিচার করার এক ভয়াবহ বিষয়।
junas.fi

4
এক্সপ্রেসের সাথে কাজ করার জন্য একটি ফাইল আপলোড পেতে আমি কয়েকদিন ধরে সংগ্রাম করে যাচ্ছি। ধন্যবাদ!!!
aProperFox

4
এর, হ'ল "বডি পার্সার" আসলে কী এবং কোথা থেকে এসেছে? @ মিক
রবিন

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

তারপরে আপনার পোস্টে আপনি ফাইল সম্পর্কিত ডেটা অ্যাক্সেস করতে পারবেন:

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

এটির একটি সম্পূর্ণ টিউটোরিয়াল এখানে পাওয়া যাবে


4
আমি unknown fieldত্রুটির সাথে হতাশ হয়ে ফর্ম মাল্টর সরিয়ে চলেছি । আমার কোডের সমস্ত কিছুই সঠিক। এটি বেশিরভাগ সময় কাজ করে তারপরে রহস্যজনকভাবে এই ব্যতিক্রমটি সমস্ত কিছু একইরকম (পরিবেশ, ফাইল, কোড, ফাইলের নাম)
দেখায়

4
নতুন TypeError নিক্ষেপ ('app.use () মিডওয়্যার ফাংশন প্রয়োজন');
ক্রিস

আপনি যদি মাল্টার ফাংশনটি app.use upload `` var আপলোড = মাল্টারে ({ডেসট: 'আপলোডস /'}) তে পাস করার সমস্যা নিয়ে থাকেন তবে আপনি এটির মতো সেটআপ করতে চাইতে পারেন ; var অ্যাপ্লিকেশন = এক্সপ্রেস () app.post ('/ প্রোফাইল', আপলোড.সিংল ('ক্ষেত্রের নাম'), ফাংশন (req, res, পরবর্তী) {কনসোল.লগ (req.file);}) `` `
আনিবে আগামাহ

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: এটি একটি পঠনযোগ্য , এরপরে একটি ফাইলে লেখা যেতে পারে যেমন আপনি সাধারণত করেন।

পিটফল: আপনাকে অবশ্যই এই পঠনযোগ্য হ্যান্ডেল করতে হবে, বা এক্সপ্রেস কখনও অনুরোধে সাড়া দেয় না , বাসবয় এপিআই ( ফাইল বিভাগ) দেখুন।


22

আমি এটি সহজ এবং দক্ষ খুঁজে পেয়েছি:

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

এক্সপ্রেস-ফাইলআপলোড


একটি আপ টু ডেট এনপিএম প্যাকেজটির সাথে আরও সাম্প্রতিক সমাধানের সন্ধানের জন্য এখানে থাকা উচিত। এক্সপ্রেস-ফাইলআপলোড এটিকে সত্যই সহজ করে তোলে।
jaredbaszler

এই উত্তরটি গিথুবের দেওয়া উদাহরণ, যদিও সংগ্রহস্থলগুলির ফাইলগুলি সন্ধান করে আপনি দেখতে পাবেন যে লাইনটি sampleFile.mv...লেখা আছে uploadPath = __dirname + '/uploads/' + sampleFile.name;- আমি খুঁজে পেয়েছি যে সামান্য অতিরিক্ত
স্পেসিফিকেশন

4

প্রদত্ত অন্যান্য উত্তরগুলির তুলনায় আমাকে কিছুটা বিশদ দিয়ে চলতে হবে (উদাহরণস্বরূপ, রানটাইম স্থলে আমি যে স্থানে সিদ্ধান্ত নেব সেখানে ফাইলটি কীভাবে লিখব?)। আশা করি এটি অন্যের পক্ষে সহায়ক হবে:  

কানেক্ট-বাসবয় পান:

npm install connect-busboy --save

আপনার সার্ভার.জেজে এই লাইনগুলি যুক্ত করুন

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('/')

    });

মাল্টারটি মাল্টিপার্ট / ফর্ম-ডেটা পরিচালনা করার জন্য একটি নোড.জেএস মিডলওয়্যার, যা প্রাথমিকভাবে ফাইলগুলি আপলোড করার জন্য ব্যবহৃত হয়। এটি সর্বাধিক দক্ষতার জন্য বাসবয়ের শীর্ষে লেখা হয়েছে।
vipinlalrv

আরও ভাল বোঝার জন্য আমি আপনার মন্তব্য বিভাগটি দিয়ে আপনার উত্তর সম্পাদনা করেছি, আমি আশা করি আপনি আপত্তি করবেন না: পি
পারদীপ জৈন

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

এই ফাইলটি আপলোড করার জিনিসটি সঠিকভাবে পাওয়ার চেষ্টা করার পরে কয়েক সপ্তাহ পরে ব্যক্তিগতভাবে মাল্টার আমার পক্ষে কাজ করেনি। তারপরে আমি শক্তিশালীতে স্যুইচ করেছি এবং কয়েক দিন পরে আমি এটিকে কোনও ত্রুটি, একাধিক ফাইল, এক্সপ্রেস এবং রিঅ্যাক্ট.জেজে ছাড়াই নিখুঁতভাবে কাজ করতে পেলাম যদিও প্রতিক্রিয়াটি isচ্ছিক। এখানে গাইডটি রয়েছে: https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s


0

আপনি যদি নোড.জেএস এক্সপ্রেস এবং টাইপসক্রিপ্টটি এখানে ব্যবহার করে থাকেন তবে এটি একটি জাভাস্ক্রিপ্টের সাথে কাজ করে, কেবল বর্ণটি পরিবর্তিত করুন এবং আমদানি ইত্যাদি অন্তর্ভুক্ত করুন ...

প্রথমে নিম্নোক্ত কমান্ডটি চালিয়ে আপনি শক্তিশালী ইনস্টল করার বিষয়টি নিশ্চিত করুন:

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();
        });
    });
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.