Узел / Экспресс-загрузка файла


я использую узел v0. 10.26 и express v4.2.0, и я довольно новичок в узле. Я бьюсь головой о свой стол в течение последних трех часов или около того, пытаясь получить форму загрузки файла, работающую с узлом. На данный момент я просто пытаюсь получить запр.файлы, чтобы не возвращать undefined. Мой взгляд выглядит так

<!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;

и вот мое приложение.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}) должен был помогите, но я даже не могу запустить свой сервер, если я добавлю эти строки.

6 63

6 ответов:

Проблема ExpressJS:

большая часть промежуточного программного обеспечения удаляется из express 4. проверьте:http://www.github.com/senchalabs/connect#middleware Для многослойного промежуточного слоя, как официант, помощник официанта-подключения, Грозный, поток, расстались необходима.

этот пример работает с помощью connect-busboy промежуточное. создайте папки /img и / public.
Используйте структуру папок:

\ server.js

\img\ " где загружается материал к"

\ public\index.HTML-код

сервер.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);
});

.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>

следующее будет работать с грозным сервер.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);
});

другой вариант-использовать мултэр, который использует помощник официанта под капотом, но проще настроить.

var multer = require('multer');

используйте 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);
});

полный учебник по этому вопросу можно найти здесь.

вот упрощенная версия (суть) Мика Каллена ответ -- отчасти, чтобы доказать, что это не должно быть очень сложно реализовать; отчасти, чтобы дать быструю ссылку для тех, кто не заинтересован в чтении страниц и страниц кода.


вы должны сделать вас приложение использовать connect-busboy:

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: это читабельный, который затем может быть записан в файл, например обычно.

ошибка: вы должны справиться с этим читаемым, или express никогда не ответит на запрос см. помощник официанта API (file).

мне нужно было пройти немного более подробно, чем другие ответы (например, как я могу записать файл в место, которое я решаю во время выполнения?). Надеюсь, это поможет другим:

get connect-busboy:

npm install connect-busboy --save

на сервере.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!');
        });
    });
});

это, казалось бы, опустить обработку ошибок, хотя... будет редактировать его, если я найду его.

Я нахожу это простым и эффективным:

app.post('/upload', function(req, res) {
   if (!req.files)
      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!');
});

express-fileupload

Multer-это узел.JS middleware for handling multipart / form-data, который в первую очередь используется для загрузки файлов. Он написан поверх помощника официанта для максимальной эффективности.

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

    });