Node/Express文件上传

121

我正在使用 node v0.10.26 和 express v4.2.0,而且我对 node 还很陌生。我已经花了大约三个小时来尝试让文件上传表单与 node 一起工作了。目前,我只是想让 req.files 不再返回 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;

这是我的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})可以帮助,但如果我添加这些行,甚至无法启动服务器。


1
可能是使用Express 4.0上传文件:req.files未定义的重复问题。 - mscdex
我使用的是 Express 3 而不是 4,因此其 API 可能已更改,但我认为您需要在 Google/Bing 上搜索 formidableexpress。据我所知,您需要启用 formidable 来处理多部分表单数据并将文件保存在本地磁盘(即 uploadDir),然后您可以使用类似 req.files 的东西来读取它们并处理您的业务逻辑。 - Shaun Xu
尝试移除"var bodyParser = require('body-parser');",而是使用如下内容:app.use(express.bodyParser()); app.use(express.methodOverride()); 我暂时没有时间测试这个。 - Canastro
虽然有些晚了,但对未来的某些人可能会有所帮助。这里提供了一个完整的教程,介绍了如何使用MongoDB上传Node.js文件:https://programmerblog.net/nodejs-file-upload-tutorial/ - Maz I
这行代码是干什么用的?app.use(express.static(path.join(__dirname, 'public'))); - geoidesic
11个回答

100

ExpressJS问题:

Express 4移除了大部分中间件,可以查看:http://www.github.com/senchalabs/connect#middleware。对于像busboy、busboy-connect、formidable、flow、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>

以下内容适用于 formidable 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);
});

50
所以我们有一个框架,它更改了重要的API并使基本的事情变得非常复杂。这就是最受欢迎的NodeJS模块? - wortwart
23
这是一个重要版本发布。根据semver.org规范,主要版本发布允许有破坏性的更改。 - Stuart P. Bentley
16
Semver.org允许在主版本号中进行破坏性的API更改,但这不是为了证明惹恼用户的行为合理的可接受点。 - joonas.fi
1
我已经苦苦挣扎了几天,试图让express实现文件上传。谢谢! - aProperFox
1
嗯,"bodyParser" 到底是什么,它来自哪里?@Mick - Robin
显示剩余3条评论

49

我觉得这个简单而高效:

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

express-fileupload


4
有人正在寻找一个更加新的解决方案,使用最新版本的NPM包可以在这里找到。express-fileupload使这一过程变得非常容易。 - jaredbaszler
这个答案是Github上给出的示例,但是如果你查看存储库文件,你会发现sampleFile.mv...这一行被写成了uploadPath = __dirname + '/uploads/' + sampleFile.name; - 我发现这个额外的解释很有帮助 链接 - BrettJ
1
请确保您的<form>元素具有enctype="multipart/form-data"。否则,req.files将为空。 - Asaf

34
另一个选择是使用 multer,它在底层使用 busboy,但设置更简单。
var multer = require('multer');
var upload = multer({dest: './uploads/'});

您可以注册全局中间件并设置上传的目标:

app.use(upload.single('avatar'));

然后,在任何你期望有文件的POST请求中,你可以访问数据:

app.post('/', function(req, res) {
    // req.file (singular) is the file
    console.dir(req.file);
});

与其全局注册中间件,您可能希望仅在特定路由上设置它:

app.post('/', upload.single('avatar'), function(req, res){
    console.dir(req.file);
});

其他的中间件选项包括fieldsarraynone(用于纯文本多部分)。例如:发送多个文件:

app.post('/', uploads.array('photos', 12), function(req, res){
    // req.files (plural) is an array of files
    console.dir(req.files);
});

在视图中创建表单时,需要使用enctype='multipart/form-data'才能使multer正常工作:
form(role="form", action="/", method="post", enctype="multipart/form-data")
    div(class="form-group")
        label Upload File
        input(type="file", name="avatar", id="avatar")

更多示例请查看github页面。


4
我对 unknown field 错误感到沮丧,因此我将放弃使用 multer。我的代码是正确的,它在大多数情况下都能正常工作,但是有时候会突然出现这个异常,而其他环境、文件、代码和文件名都没有变化。 - kishu27
3
throw new TypeError('app.use() 需要中间件函数'); - kris
如果你无法将 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 的 answer 的简化版本(要点)-- 一部分证明实现这个并不需要非常复杂;一部分为了给不想阅读大量代码的任何人提供快速参考。

你必须让你的应用程序使用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(中间件已正确加载) - 在req.busboy上设置一个"file"监听器 - 将req的内容传输到req.busboy 在文件监听器内部有一些有趣的事情,但真正重要的是fileStream:这是一个Readable,可以像通常一样写入文件。
注意:您必须处理此可读流,否则express将永远无法响应请求,请参见busboy APIfile部分)。

6

这是一个我觉得更容易的方法:

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


});

哦,哇,这是一个有趣的实现。它对不同的文件格式工作良好吗? - Merunas Grincalaitis

5

其他答案没有提供足够详细的步骤,我需要更详细的指导(例如,如何将文件写入我在运行时决定的位置?)希望这对其他人有所帮助:

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

这似乎忽略了错误处理... 如果我找到了错误,我会进行编辑。


2
在普通的Node.js中,我完成了一些工作。只是一个快速的上传服务器,不是花哨的express框架。可能不是问题提出者想要的东西。
const fs = require('fs'),
      http = require('http'),
      port = process.env.PORT || 9000,
      host = process.env.HOST || '127.0.0.1';
//tested on node=v10.19.0, export HOST="192.168.0.103"
http.createServer(function(req, res) {

  // Check if form is submitted and save its content
  if (req.method == "POST") try {
    store_file(req)

  // This is here incase any errors occur
  } catch (err) {
    res.writeHead(404);
    res.end('Server Borked');
    return;
  }

  // respond with a simple html form so they can post more data
  res.writeHead(200, {"content-type":"text/html; charset=utf-8"});
  res.end(`
<form  method="post" enctype="multipart/form-data">
  <input type="file" name="fileUpload">
  <input type="submit" value="Upload">
</form>`);
}).listen(port, host, () => console.dir(`Serving at http://${host}:${port}`));

function store_file(req) {
  // Generate temporary file name
  var temp = 'temp' + Math.floor(Math.random() * 10);

  // This opens up the writeable stream to temporary file
  var writeStream = fs.createWriteStream(temp);

  // This pipes the POST data to the file
  req.pipe(writeStream);

  // After the temporary file is creates, create real file
  writeStream.on('finish', () => {

    reader = fs.readFileSync(temp);
    filename = reader.slice(reader.indexOf("filename=\"") + "filename=\"".length, reader.indexOf('"\r\nContent-Type'));
    hash = reader.slice(0,reader.indexOf('\r\n'));
    content = reader.slice(reader.indexOf('\r\n\r\n') + '\r\n\r\n'.length, reader.lastIndexOf(Buffer.from('\r\n') + hash));

    // After real file is created, delete temporary file
    fs.writeFileSync(filename.toString(), content);
    fs.unlinkSync(temp);
  });
}

1
const http          = require('http');
const fs            = require('fs');

// https://www.npmjs.com/package/formidable
const formidable    = require('formidable');

// https://dev59.com/Zl0Z5IYBdhLWcg3wiw_n
const path          = require('path');

router.post('/upload', (req, res) => {
    console.log(req.files);

    let oldpath = req.files.fileUploaded.path;

    // https://dev59.com/Zl0Z5IYBdhLWcg3wiw_n       
    let newpath = path.resolve( `./${req.files.fileUploaded.name}` );

    // copy
    // https://dev59.com/_VgQ5IYBdhLWcg3wLQuW
    fs.copyFile( oldpath, newpath, (err) => {

        if (err) throw err;

        // delete
        fs.unlink( oldpath, (err) => {

            if (err) throw err;

            console.log('Success uploaded")
        } );                

    } );

});

1
Multer是一个用于处理multipart/form-data的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是一个用于处理multipart/form-data的node.js中间件,主要用于上传文件。它基于busboy编写,以实现最大效率。 - vipinlalrv
为了更好的理解,我已经编辑了您的回答和评论部分,希望您不介意 :P - Pardeep Jain

0

个人而言,经过数周的尝试,multer 对我来说并没有起作用,以至于我一直在努力实现文件上传功能。然后我转向 formidable,在几天内完美地解决了问题,没有任何错误,支持多个文件,还可以与 express 和 react.js 配合使用(虽然 react 是可选的)。这是指南:https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接