节点/快速文件上传


93

我正在使用节点v0.10.26并表示v4.2.0,而我对节点还是很新的。在过去三个多小时的时间里,我一直在试图将文件上传表单与Node配合使用,这一直困扰着我。在这一点上,我只是想让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})应该可以提供帮助,但是如果添加这些行,我什至无法启动服务器。



我使用了express 3而不是4,因此它的api可能会更改,但是我认为您需要google / bing formidableexpress。您需要启用AFAIK,formiable该AFAIK 负责处理多部分表单数据,将文件保存在本地磁盘中(这是uploadDir手段),然后您可以使用类似的方法req.files来读取它们并处理您的业务逻辑。

尝试删除“ var bodyParser = require('body-parser');” 而不是使用该bodyParser var,而是使用如下代码:app.use(express.bodyParser()); app.use(express.methodOverride()); 我没有时间测试这个atm ...
Canastro 2014年

它已经晚了,但将来可能会对某些人有所帮助。这是使用mongodb 程序员
Jason W,

这条线是做什么用的?app.use(express.static(path.join(__dirname, 'public')));
大地测量学'18

Answers:


94

ExpressJS问题:

大多数中间件已从express 4中删除。签出:http : //www.github.com/senchalabs/connect#middleware 对于多部分中间件,如busboy,busboy-connect,强大,流程,parted是必需的。

此示例使用connect-busboy中间件工作。创建/ img和/ public文件夹。
使用文件夹结构:

\ server.js

\ img \“资料上传到的位置”

\ public \ 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
因此,我们有一个框架,可以更改重要的API,并使基本的事情变得极其复杂。那是最受欢迎的NodeJS模块?
wortwart

18
这是一个主要版本。根据semver.org规范,重大版本中允许进行重大更改。
Stuart P. Bentley 2014年

6
当然semver.org允许对主要版本号中的API进行更改,但这在试图证明惹恼用户时是一个可怕的观点。
joonas.fi 2014年

1
我一直在努力使文件上传与Express配合使用。谢谢!!!
aProperFox

1
嗯,“ bodyParser”到底是什么,它是从哪里来的?@Mick
罗宾

27

另一个选择是使用multer,它在幕后使用了busboy,但设置起来更简单。

var multer = require('multer');

使用multer并设置上传目标:

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

在您的视图中创建一个表格,enctype='multipart/form-datamulter才能正常工作:

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

抛出新的TypeError('app.use()需要中间件功能');
克里斯,

如果在将multer函数传递给app.use ```var upload = multer({dest:'uploads /'});时遇到问题,则可能需要这样设置。var app = express()app.post('/ profile',upload.single('field-name'),function(req,res,next){console.log(req.file);})```
阿尼贝·阿加玛(Anibe Agamah)

22

这是米克·库伦(Mick Cullen)回答的简化版本(要点),部分证明了实现这一点并不需要太复杂。部分目的是为那些对阅读页面和代码页面不感兴趣的人提供快速参考。


您必须让您的应用使用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:这是一个Readable,然后可以像通常那样将其写入文件。

陷阱:您必须处理此Readable,否则express将永远不会响应该请求,请参阅busboy API文件部分)。


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

表达文件上传


有人在寻找具有最新NPM软件包的最新解决方案的人应该在这里。express-fileupload使此操作非常容易。
jaredbaszler

4

与提供的其他答案相比,我需要更详细地了解(例如,如何将文件写入运行时确定的位置?)。希望这对其他人有帮助:  

获得connect-busboy:

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

Multer是用于处理多部分/表单数据的node.js中间件,主要用于上传文件。它被编写在busboy之上,以实现最大效率。

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

    });

Multer是用于处理多部分/表单数据的node.js中间件,主要用于上传文件。它被编写在busboy之上,以实现最大效率。
vipinlalrv

为了更好地理解,我在您的评论部分中编辑了您的答案,希望您不要介意:P
Pardeep 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

如果您使用的是Node.js Express和Typescript,这是一个有效的示例,它也适用于javascript,只需将let更改为var,将import更改为include等。

首先导入以下内容,确保通过运行以下命令来安装强大的功能:

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();
        });
    });
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.