【求助】Nodejs express upload file 发现没有数据上传

【求助】Nodejs express upload file 发现没有数据上传

最近新开始是哟个nodejs，觉得十分舒爽，但是雀跃到问题 我用的是express 4.2 body-paser 1.02 express设置代码如下： app.use(favicon()); app.use(logger(‘dev’)); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(bodyParser( {uploadDir:path.join(__dirname, ‘uploads’) ,keepExtensions:true})); app.use(cookieParser()); app.use(express.static(path.join(__dirname, ‘public’)));

问题是postdata后，却发现 req.body是空得？ 郁闷呀，求大侠帮助呀


3 回复

当然可以。根据你提供的信息，你的Express应用中使用了body-parser来处理文件上传，但似乎没有正确地接收到上传的文件数据。这里有几个可能的原因和解决方案：

原因分析

  1. 错误的中间件顺序：确保body-parser中间件在处理文件上传之前被调用。
  2. 文件上传库：body-parser本身并不支持文件上传，你需要一个专门处理文件上传的中间件，如multer。
  3. 请求类型：确保你在前端发送POST请求时设置了正确的Content-Type，通常是multipart/form-data。

解决方案

安装Multer

首先，你需要安装multer，这是一个专为Node.js设计的用于处理multipart/form-data的中间件。

npm install multer --save

修改Express配置

接下来，修改你的Express配置以使用multer来处理文件上传：

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const path = require('path');

const app = express();

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

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

// 使用中间件
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 处理文件上传的路由
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send(`File uploaded successfully: ${req.file.path}`);
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));

前端示例

确保你的前端代码发送了正确的multipart/form-data请求：

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

通过以上步骤，你应该能够正确处理文件上传，并在服务器端接收到上传的数据。希望这能解决你的问题！


参加我的统一回复：http://cnodejs.org/topic/53a6eabac3ee0b5820cb4493

根据你的描述，你在使用 Express 和 body-parser 处理文件上传时遇到了问题，req.body 是空的。这里有几个可能的原因及解决方法：

  1. body-parser 不适用于文件上传：body-parser 主要用于解析 JSON 和 URL 编码的数据，对于文件上传你需要使用专门的中间件，比如 multer。

  2. Multer 设置：你需要安装 multer 并正确配置它来处理文件上传。

以下是示例代码，展示如何使用 multer 来处理文件上传：

安装 Multer

npm install multer --save

示例代码

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

const app = express();

// 设置 Multer 存储策略
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, path.join(__dirname, 'uploads'));
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

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

// 静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

// 使用 Multer 中间件处理文件上传
app.post('/upload', upload.single('file'), (req, res) => {
    // 文件保存路径在 req.file.path
    res.send(`File uploaded to ${req.file.path}`);
});

// 其他中间件
app.use(require('morgan')('dev'));
app.use(require('cookie-parser')());

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

解释

  • multer.diskStorage：定义文件存储策略。
  • upload.single('file')：表示处理单个文件上传，字段名为 file。
  • req.file：文件上传成功后，Express 会将文件信息存放在 req.file 中。

希望这些示例代码能帮助你解决问题。

回到顶部