Node/Express 文件上传

Posted

技术标签:

【中文标题】Node/Express 文件上传【英文标题】：Node/Express file upload 【发布时间】：2014-07-04 15:58:17 【问题描述】：

我正在使用节点 v0.10.26 并表示 v4.2.0，我对节点很陌生。在过去三个左右的时间里，我一直在用头撞桌子，试图让文件上传表单与 node.js 一起工作。在这一点上，我只是想让 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) 在内的内容应该有所帮助，但如果我添加这些行，我什至无法启动我的服务器。

【问题讨论】：

File uploading with Express 4.0: req.files undefined 的可能重复项 我使用 express 3 而不是 4，所以它的 api 可能会改变，但我认为你需要 google/bing formidable 和 express。 AFAIK您需要启用formiable，它负责处理多部分表单数据，将文件保存在本地磁盘中（这是uploadDir的意思）然后您可以使用req.files之类的东西来读取它们并处理您的业务逻辑。 尝试删除“var bodyParser = require('body-parser');”而不是使用那个bodyParser var，而是使用这样的东西： app.use(express.bodyParser()); app.use(express.methodOverride());我没有时间测试这个atm... 它已经晚了，但将来可能对某些人有所帮助。这是一个完整的使用mongodb上传node js文件的教程programmerblog.net/nodejs-file-upload-tutorial 这条线是干什么用的？ app.use(express.static(path.join(__dirname, 'public'))); 【参考方案1】：

你可以使用

快速文件上传 用于上传文件的简单快速中间件。

npm i express-fileupload

app.post('/upload', function(req, res) 
  console.log(req.files.foo); // the uploaded file object
);

【讨论】：

【参考方案2】：

在 vanila 节点中，我解决了一些问题。只是一个快速上传服务器。不是花哨的快递。可能不是提问者想要的。

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

【讨论】：

【参考方案3】： 
const http          = require('http');
const fs            = require('fs');

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

// https://***.com/questions/31317007/get-full-file-path-in-node-js
const path          = require('path');

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

    let oldpath = req.files.fileUploaded.path;

    // https://***.com/questions/31317007/get-full-file-path-in-node-js       
    let newpath = path.resolve( `./$req.files.fileUploaded.name` );

    // copy
    // https://***.com/questions/43206198/what-does-the-exdev-cross-device-link-not-permitted-error-mean
    fs.copyFile( oldpath, newpath, (err) => 

        if (err) throw err;

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

            if (err) throw err;

            console.log('Success uploaded")
         );                

     );

);

【讨论】：

【参考方案4】：

我觉得这个简单高效：

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

【讨论】：

有人正在寻找具有最新 NPM 包的更新解决方案的人应该看这里。 express-fileupload 让这一切变得非常简单。 这个答案是 Github 上给出的示例，但是查看存储库文件，您会看到 sampleFile.mv... 行写成 uploadPath = __dirname + '/uploads/' + sampleFile.name; - 我发现一点额外的澄清很有帮助 Link跨度> 【参考方案5】：

如果您使用的是 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();
        );
    );

【讨论】：

【参考方案6】：

经过数周尝试正确上传文件后，我个人 multer 并没有为我工作。然后我切换到强大的，几天后我让它完美地工作，没有任何错误，多个文件，express 和 react.js，即使 react 是可选的。这是指南：https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s

【讨论】：

【参考方案7】：

这是一种对我有用的更简单的方法：

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


);

【讨论】：

哇，这是一个有趣的实现。它适用于不同的文件格式吗？【参考方案8】：

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 是一个node.js 中间件，用于处理multipart/form-data，主要用于上传文件。它被写在 busboy 的顶部以获得最大的效率。 为了更好地理解我已经在你的评论部分编辑了你的答案，我希望你不介意：P【参考方案9】：

我需要比提供的其他答案更详细一些（例如，如何将文件写入我在运行时决定的位置？）。希望这对其他人有所帮助：  

获取连接总线男孩：

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

虽然这似乎省略了错误处理...如果我找到它会编辑它。

【讨论】：

【参考方案10】：

这里是 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，然后可以像往常一样将其写入文件。

陷阱：您必须处理此 Readable，否则 express 将永远不会响应请求，请参阅the busboy API（文件部分）。

【讨论】：

【参考方案11】：

另一种选择是使用multer，它在引擎盖下使用了busboy，但设置起来更简单。

var multer = require('multer');

使用 multer 并设置上传目的地：

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

在您的视图中创建一个表单，multer 需要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")

然后在您的 POST 中，您可以访问有关文件的数据：

app.post('/', function(req, res) 
  console.dir(req.files);
);

可以在here找到完整的教程。

【讨论】：

在对 unknown field 错误感到沮丧之后，我将离开表单 multer。我的代码中的所有内容都是正确的。它大部分时间都有效，然后神秘地显示此异常，但一切都保持不变（环境、文件、代码、文件名） throw new 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); ) `` 【参考方案12】：

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>

以下将与强大的 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);
);

【讨论】：

所以我们有一个框架可以改变重要的 API 并使基本的事情变得非常复杂。那是最流行的 NodeJS 模块吗？ 这是一个主要版本。根据 semver.org 规范，允许在主要版本中进行重大更改。 当然 semver.org 允许在主要版本号中破坏 API 更改，但这是试图证明惹恼用户的一个可怕点。 我几天来一直在努力让文件上传与 express 一起工作。谢谢！！！ 呃，“bodyParser”到底是什么，它来自哪里？ @米克

以上是关于Node/Express 文件上传的主要内容，如果未能解决你的问题，请参考以下文章

Node/Express 文件上传

node+express4实现简单文件上传

node express formidable 文件上传后修改文件名

node express 上传文件

将图像文件从 React 前端上传到 Node/Express/Mongoose/MongoDB 后端（不工作）

layer 的上传接口怎么使用