Узел / Экспресс-загрузка файла
я использую узел 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 ответов:
Проблема 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!'); });
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('/') });