请问在 Express 4.0 里如何使用 Nodejs 实现上传?

请问在 Express 4.0 里如何使用 Nodejs 实现上传?

是要在 app.js 里添加:

app.use(bodyParser({ keepExtensions: true, uploadDir: './public/images' }));  ?

我表单的 file 的名字为 file1,在接收请求里这样子写

router.post('/', function(req, res){
    console.log(req.files.file1);
});

会报:

TypeError: Cannot read property 'file1' of undefined

请问如何实现个简单上传?谢谢!


13 回复

要在 Express 4.0 中实现文件上传,你需要使用 multer 这样的中间件来处理文件上传。以下是一个简单的示例,展示如何配置和使用 multer 来处理文件上传。

安装必要的依赖

首先,确保你已经安装了 expressmulter

npm install express multer

配置 Multer

创建一个名为 upload.js 的文件,并设置 Multer 以指定文件存储目录:

const multer = require('multer');

// 设置存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/images'); // 指定文件存储路径
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop());
  }
});

const upload = multer({ storage: storage });

module.exports = upload;

在路由中使用 Multer

接下来,在你的路由文件中(例如 routes.js)使用配置好的 Multer:

const express = require('express');
const router = express.Router();
const upload = require('./upload');

// 处理文件上传的路由
router.post('/upload', upload.single('file1'), function(req, res, next) {
  if (!req.file) {
    return res.status(400).send('No file uploaded.');
  }

  res.send(`File uploaded successfully! File name: ${req.file.filename}`);
});

module.exports = router;

在主应用文件中使用路由

最后,在你的 app.js 文件中引入并使用这个路由:

const express = require('express');
const app = express();
const router = require('./routes');

// 使用 Multer 中间件
app.use('/api', router);

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

HTML 表单

为了测试文件上传功能,你可以创建一个简单的 HTML 表单:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upload File</title>
</head>
<body>
  <form action="/api/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file1">
    <button type="submit">Upload</button>
  </form>
</body>
</html>

将此表单保存为 index.html 并放在你的项目根目录中。

通过以上步骤,你应该能够成功地在 Express 4.0 中实现文件上传。


使用multer中间件 app.use(require(‘multer’)({dest:__dirname + ‘/uploads’}));

4.0 的 bodyparser 不处理文件了啊…

要处理文件得用

https://github.com/andrewrk/connect-multiparty

我這樣子app.use(connect.multipart({ uploadDir: ‘./public/’ }));已經能夠上傳,但是如何在它沒有保存到文件夾的時候處理它呢?比如重命名?謝謝!

謝謝!已經可以了,但是我怎麼在文件保存到目的地的時候先處理它呢?

formidable

formidable +1 https://www.npmjs.org/package/formidable coffeescript 示例:

  form = new formidable.IncomingForm()
  form.parse req, (err, fields, files)->
      console.log files
      console.log fields

coffeescript + 1

connect-multiparty 的作者已经不推荐使用这个中间件了。其不会在上传后将之前生成的临时文件清除。

最好使用 formidable 或者busboy。

下面是简单的busboy使用示例

busboy = require 'connect-busboy'
...
app.use busboy()
...
app.post '/upload', (req,res)->
	req.pipe req.busboy
	req.busboy.on 'file', (fieldname, file, filename) ->
		...

multipartybusboy 不知道区别是什么,我选的前者,npm下载量是后者的10倍

multer吧 express官方推荐 自豪地采用 CNodeJS ionic

要在Express 4.0中实现文件上传,你需要使用multer库,而不是bodyParsermulter是专门用于处理multipart/form-data的中间件,适用于文件上传。

首先,安装multer

npm install multer --save

然后,你可以设置multer来处理文件上传,并在你的路由中使用它。以下是一个简单的例子:

设置Multer

创建一个名为upload.js的文件,并配置multer

const multer = require('multer');

// 配置存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/images'); // 指定文件存储路径
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '.' + file.originalname.split('.').pop()); // 使用时间戳加上文件扩展名作为文件名
  }
});

const upload = multer({ storage: storage });

module.exports = upload;

在路由中使用Multer

在你的router.js文件中,引入并使用multer

const express = require('express');
const router = express.Router();
const upload = require('./upload');

router.post('/', upload.single('file1'), function(req, res) {
  console.log(req.file); // 文件信息
  console.log(req.body); // 其他表单数据
  res.send('File uploaded successfully.');
});

module.exports = router;

HTML表单

确保你的HTML表单设置为enctype="multipart/form-data",并且文件输入字段的名称与你在服务器端使用的名称一致:

<form action="/your-endpoint" method="post" enctype="multipart/form-data">
  <input type="file" name="file1">
  <button type="submit">Upload</button>
</form>

总结

通过上述步骤,你可以在Express 4.0应用中实现基本的文件上传功能。关键点在于使用multer代替bodyParser来处理文件上传。

回到顶部