基于express的文件上传 Nodejs实现

基于express的文件上传 Nodejs实现

上传文件服务端

exports.postFile = function (req, res) {
    var upfile = req.files.upfile;
    var files = [];
    if (upfile instanceof  Array) {
        files = upfile;
    } else {
        files.push(upfile);
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var path = file.path;
        var name = file.name;
        var target_path = "./upload/" + name;
        fs.rename(path, target_path, function (err) {
            if (err) throw err;
        });
    }

    res.render('index', { title:'Complete' });
}

另外app.js加个app.use(express.bodyParser({uploadDir:'./upload_tmp'}));

页面前端

<form method="post" action="/upload" enctype="multipart/form-data">
    <input type="file" name="upfile" multiple/>
    <input type="submit" value="upload">
</form>

10 回复

基于Express的文件上传 Node.js 实现

在Web开发中，文件上传是一项常见的功能。本文将展示如何使用Express框架来实现一个简单的文件上传功能。我们将通过后端代码处理文件上传，并在前端提供一个简单的表单供用户选择并上传文件。

后端代码

首先，我们需要安装必要的依赖项。在项目根目录下运行以下命令：

npm install express multer

multer 是一个专门用于处理 multipart/form-data 的中间件，适用于文件上传。

接下来，在项目的某个模块中编写处理文件上传的逻辑。例如，我们可以创建一个名为 fileUpload.js 的文件，并在其中定义处理文件上传的函数：

const express = require('express');
const multer = require('multer');
const fs = require('fs');

// 设置存储引擎
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

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

const app = express();

// 处理文件上传请求
app.post('/upload', upload.array('upfile', 12), function (req, res) {
    const files = req.files;

    // 遍历所有上传的文件
    files.forEach(file => {
        console.log(`Uploaded file: ${file.originalname}`);
    });

    res.send('Files uploaded successfully.');
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端代码

为了测试文件上传功能，我们可以在前端创建一个简单的HTML表单。表单的 enctype 属性设置为 multipart/form-data，以便能够正确地发送文件数据。

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

将上述HTML代码保存为 index.html 文件，并将其放在项目根目录中。这样，当用户访问该页面时，就可以看到一个文件上传表单。

总结

以上就是使用Express和Multer实现文件上传的基本步骤。通过配置Multer的存储引擎，我们可以指定文件的存储路径和命名规则。同时，前端表单的 enctype 属性和 input[type=file] 元素确保了文件数据能够被正确地发送到服务器。希望这篇文章能帮助你快速搭建一个文件上传功能。


fs.rename(path, target_path, function (err) { if (err) throw err; });

提示fs没定义？

觉得那res.render 来得早了点，我会这样的，不过没试过：

fs.rename(path, target_path, function (err) {
if (err) throw err;
if (i == files.length)
	res.render('index', { title:'Complete' });
 });

你是不是没有var fs=require(‘fs’)

这样是确保文件存储成功后返回，可取

嗯对文件操作不熟没引用

var fs = require('fs');

不过不知道为什么用上面的老不行我自己这样写了一个是可以的

fs.readFile(req.files.upfile.path, function(err, data){

var newPath = ‘D:/node/test/20121210/upload/’ + req.files.upfile.name;


fs.writeFile(newPath, data, function(err){
    if(err)console.log(err);
    else console.log("成功");
});

});

fs.rename可能不适合用在不同的disk中，直少在linux是这样，试试看，如果rename的path,target_path都是 C 或都是D drive的情形是否行？

出现中文乱码怎样解决

express 4.x里设置 app.use(express.bodyParser({uploadDir:'./upload_tmp'})); 这个报错

为了实现基于Express的文件上传功能，我们需要使用multer中间件来处理文件上传。multer是一个专门用于处理multipart/form-data的中间件，主要用于处理文件上传。以下是详细的步骤和示例代码。

步骤

  1. 安装依赖：首先需要安装express和multer。

    npm install express multer

  2. 创建Multer配置：设置存储策略和其他选项。

  3. 创建路由：设置文件上传的POST路由。

  4. 前端HTML表单：创建一个可以上传文件的HTML表单。

示例代码

1. 安装并引入依赖

const express = require('express');
const multer = require('multer');

const app = express();

2. 创建Multer配置

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 指定文件保存路径
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.' + file.originalname.split('.').pop()) // 自定义文件名
  }
});

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

3. 创建路由

app.post('/upload', upload.single('upfile'), (req, res) => {
  res.send('File uploaded successfully.');
});

4. 前端HTML表单

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

解释

  1. Multer配置：multer.diskStorage用于配置文件的存储路径和文件名。
  2. 路由：upload.single('upfile')表示接受单个文件上传，文件字段名为upfile。如果需要处理多个文件，可以使用upload.array('upfile', 10)或类似的配置。
  3. 前端表单：enctype="multipart/form-data"确保表单数据以multipart/form-data格式提交，这是上传文件所必需的。

通过以上步骤和代码，你可以轻松地实现基于Express的文件上传功能。

回到顶部