تحميل الصور باستخدام Node.js و Express و Mongoose



image file-upload (8)

أعلم أن السؤال الأصلي يتعلق بإصدارات محددة ، ولكنه أشار أيضًا إلى "الأحدث" - لم تعد مشاركة JohnAllen ذات صلة بسبب BodyParser و Connect-Form في Expressjs

يوضح هذا سهولة استخدام bodyParser المضمنة ():

 /**
 * Module dependencies.
 */

var express = require('express')

var app = express()
app.use(express.bodyParser({ keepExtensions: true, uploadDir: '/home/svn/rest-api/uploaded' }))

app.get('/', function(req, res){
  res.send('<form method="post" enctype="multipart/form-data">'
    + '<p>Image: <input type="file" name="image" /></p>'
    + '<p><input type="submit" value="Upload" /></p>'
    + '</form>');
});

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

    res.send('Uploaded: ' + req.files.image.name)
    return next()

});

app.listen(3000);
console.log('Express app started on port 3000');

يرجى الأخذ بعين الاعتبار الأجوبة الجديدة التي تحتوي على معلومات أكثر حداثة حيث تغيرت الأشياء على مر السنين!

نظرًا لأن العديد من مكتبات Node.js الجديدة أصبحت سريعًا عفا عليها الزمن ، وهناك أمثلة قليلة نسبيًا على أي حال أريد السؤال عن تحميل الصور باستخدام أحدث الإصدارات من Node.js (v0.4.1) و Express (1.0.7) و Mongoose ( 1.1.0). كيف فعل الآخرون ذلك؟

لقد وجدت: https://github.com/felixge/node-formidable ، لكنني جديد لتحميل الصور بشكل عام لذلك أريد أن أتعلم أشياء عامة وطرق للقيام بذلك باستخدام Node.js و Express.


إليك طريقة لتحميل صورك باستخدام الحزمة الهائلة ، والتي يوصى بها عبر bodyParser في الإصدارات الأحدث من Express. ويتضمن ذلك أيضًا القدرة على تغيير حجم صورك على الطاير:

تحميل وتغيير حجم الصور (على الطاير) مع Node.js و Express .

وهنا جوهر:

var express = require("express"),
app = express(),
formidable = require('formidable'),
util = require('util')
fs   = require('fs-extra'),
qt   = require('quickthumb');

// Use quickthumb
app.use(qt.static(__dirname + '/'));

app.post('/upload', function (req, res){
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, fields, files) {
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:\n\n');
    res.end(util.inspect({fields: fields, files: files}));
  });

  form.on('end', function(fields, files) {
    /* Temporary location of our uploaded file */
    var temp_path = this.openedFiles[0].path;
    /* The file name of the uploaded file */
    var file_name = this.openedFiles[0].name;
    /* Location where we want to copy the uploaded file */
    var new_location = 'uploads/';

    fs.copy(temp_path, new_location + file_name, function(err) {  
      if (err) {
        console.error(err);
      } else {
        console.log("success!")
      }
    });
  });
});

// Show the upload form 
app.get('/', function (req, res){
  res.writeHead(200, {'Content-Type': 'text/html' });
  /* Display the file upload form. */
  form = '<form action="/upload" enctype="multipart/form-data" method="post">'+ '<input name="title" type="text" />
  '+ '<input multiple="multiple" name="upload" type="file" />
  '+ '<input type="submit" value="Upload" />'+ '</form>';
  res.end(form); 
}); 
app.listen(8080);

ملاحظة: هذا يتطلب Image Magick لتغيير حجم الإبهام السريع.


بالنسبة لـ Express 3.0 ، إذا كنت ترغب في استخدام الأحداث الهائلة ، فيجب عليك إزالة البرامج الوسيطة متعددة الأجزاء ، حتى تتمكن من إنشاء مثيل جديد لها.

لفعل هذا:

app.use(express.bodyParser());

يمكن كتابتها على النحو التالي:

app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart()); // Remove this line

والآن قم بإنشاء كائن النموذج:

exports.upload = function(req, res) {
    var form = new formidable.IncomingForm;
    form.keepExtensions = true;
    form.uploadDir = 'tmp/';

    form.parse(req, function(err, fields, files){
        if (err) return res.end('You found error');
        // Do something with files.image etc
        console.log(files.image);
    });

    form.on('progress', function(bytesReceived, bytesExpected) {
        console.log(bytesReceived + ' ' + bytesExpected);
    });

    form.on('error', function(err) {
        res.writeHead(400, {'content-type': 'text/plain'}); // 400: Bad Request
        res.end('error:\n\n'+util.inspect(err));
    });
    res.end('Done');
    return;
};

لقد قمت بنشر هذا أيضًا على مدونتي ، والحصول على كائن نموذج هائل في Express 3.0 عند التحميل .


جرب هذا الكود. سوف يساعد.

app.get('/photos/new', function(req, res){
  res.send('<form method="post" enctype="multipart/form-data">'
    + '<p>Data: <input type="filename" name="filename" /></p>'
    + '<p>file: <input type="file" name="file" /></p>'
    + '<p><input type="submit" value="Upload" /></p>'
    + '</form>');
});


 app.post('/photos/new', function(req, res) {
  req.form.complete(function(err, fields, files) {
    if(err) {
      next(err);
    } else {
      ins = fs.createReadStream(files.photo.path);
      ous = fs.createWriteStream(__dirname + '/directory were u want to store image/' + files.photo.filename);
      util.pump(ins, ous, function(err) {
        if(err) {
          next(err);
        } else {
          res.redirect('/photos');
        }
      });
      //console.log('\nUploaded %s to %s', files.photo.filename, files.photo.path);
      //res.send('Uploaded ' + files.photo.filename + ' to ' + files.photo.path);
    }
  });
});

if (!module.parent) {
  app.listen(8000);
  console.log("Express server listening on port %d, log on to http://127.0.0.1:8000", app.address().port);
}

قمت بإنشاء مثال يستخدم Express و Multer. إنه بسيط للغاية ويتجنب جميع تحذيرات Connect

قد يساعد شخص ما.


مرة أخرى إذا كنت لا ترغب في استخدام bodyParser ، فإن الأعمال التالية:

var express = require('express');
var http = require('http');
var app = express();

app.use(express.static('./public'));


app.configure(function(){
    app.use(express.methodOverride());
    app.use(express.multipart({
        uploadDir: './uploads',
        keepExtensions: true
    }));
});


app.use(app.router);

app.get('/upload', function(req, res){
    // Render page with upload form
    res.render('upload');
});

app.post('/upload', function(req, res){
    // Returns json of uploaded file
    res.json(req.files);
});

http.createServer(app).listen(3000, function() {
    console.log('App started');
});

هناك طريقي لملف التحميل المتعدد:

العقيدات:

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

var multiparty = require('multiparty');
var form = new multiparty.Form();
var fs = require('fs');

form.parse(req, function(err, fields, files) {  
    var imgArray = files.imatges;


    for (var i = 0; i < imgArray.length; i++) {
        var newPath = './public/uploads/'+fields.imgName+'/';
        var singleImg = imgArray[i];
        newPath+= singleImg.originalFilename;
        readAndWriteFile(singleImg, newPath);           
    }
    res.send("File uploaded to: " + newPath);

});

function readAndWriteFile(singleImg, newPath) {

        fs.readFile(singleImg.path , function(err,data) {
            fs.writeFile(newPath,data, function(err) {
                if (err) console.log('ERRRRRR!! :'+err);
                console.log('Fitxer: '+singleImg.originalFilename +' - '+ newPath);
            })
        })
}
})

تأكد من أن نموذجك يحتوي على enctype = "متعدد الأجزاء / بيانات النموذج"

آمل أن يعطيك هذا يداً ؛)


يمكنك أيضًا استخدام ما يلي لتعيين مسار حيث تحفظ الملف.

req.form.uploadDir = "<path>";




mongoose