Nodejs req.files.thumbnail.path 报错，各位大大知道什么回事吗？

Nodejs req.files.thumbnail.path 报错，各位大大知道什么回事吗？

app.get(’/test’,function(req,res){ res.render(‘admin/editArticle.ejs’,{ content:"" }) }) app.post(’/test’,function(req,res){ var tmpPath=req.files.thumbnail.path; console.log(tmpPath); })

ejs 代码 如下

<input type=“file” name=“thumbnail” id=“thumbnail”/>

报错如下~~ 我是在win 环境下的 express 3

500 TypeError: Cannot read property ‘thumbnail’ of undefined


4 回复

根据你提供的信息，错误提示 TypeError: Cannot read property 'thumbnail' of undefined 表明 req.files 是未定义的。这通常是因为在处理文件上传时，缺少必要的中间件来解析请求中的文件数据。

在 Node.js 中，使用 Express 框架处理文件上传时，需要安装并配置 multer 这样的中间件。以下是如何正确设置和使用 multer 的示例：

安装 Multer

首先，确保你已经安装了 multer。如果没有安装，可以使用 npm 来安装：

npm install multer --save

设置 Multer

创建一个配置文件（例如 upload.js）来设置 multer：

const multer = require('multer');

// 配置存储路径
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 将文件存储到 'uploads/' 目录下
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()) // 使用时间戳作为文件名
  }
});

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

module.exports = upload;

在路由中使用 Multer

接下来，在你的路由文件中使用配置好的 multer：

const express = require('express');
const upload = require('./upload'); // 引入 Multer 配置
const app = express();

// GET 请求用于渲染表单
app.get('/test', function(req, res) {
  res.render('admin/editArticle.ejs', { content: "" });
});

// POST 请求处理文件上传
app.post('/test', upload.single('thumbnail'), function(req, res) {
  console.log(req.file); // 打印上传的文件信息
  console.log(req.file.path); // 打印文件路径
  res.send("File uploaded successfully");
});

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

EJS 文件

确保你的 EJS 文件中包含文件输入字段：

<form action="/test" method="post" enctype="multipart/form-data">
  <input type="file" name="thumbnail" id="thumbnail"/>
  <button type="submit">Upload</button>
</form>

解释

  • Multer 是一个用于处理 multipart/form-data 的中间件，主要用于上传文件。
  • 在 multer 配置中，我们设置了文件的存储路径和文件名。
  • 在路由中，我们使用 upload.single('thumbnail') 来处理单个文件的上传，并将文件信息存储在 req.file 中。
  • 在客户端，我们需要确保表单的 enctype 属性设置为 multipart/form-data，以便正确地发送文件数据。

通过以上步骤，你应该能够成功处理文件上传，并访问 req.files 或 req.file 中的文件路径。


http://expressjs.jser.us/api.html#req.files
看下这里，你是不是哪里没有配置

有配置 app.use(express.bodyParser({ keepExtensions: true, uploadDir: ‘./public/upload’ }));

从你的描述来看，问题出在 req.files 为 undefined，这意味着在处理文件上传时没有正确地获取到上传的文件。通常情况下，这可能是因为缺少必要的中间件来解析表单数据和文件。

在 Express.js 中，你需要使用 multer 或其他类似的库来处理文件上传。以下是如何使用 multer 来解决这个问题的示例：

  1. 安装 multer：

    npm install multer --save

  2. 修改你的 Node.js 代码：

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

const app = express();
const upload = multer({ dest: 'uploads/' });

app.get('/test', function(req, res) {
    res.render('admin/editArticle.ejs', { content: "" });
});

app.post('/test', upload.single('thumbnail'), function(req, res) {
    const tmpPath = req.file.path;
    console.log(tmpPath);
    res.send("File uploaded successfully");
});

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

在这个例子中，multer 被配置为将上传的文件存储在 uploads/ 目录下。upload.single('thumbnail') 是一个中间件，用于解析单个文件上传，并将其添加到 req.file 中。

确保你的 HTML 表单设置正确，包含 enctype="multipart/form-data" 属性：

<form action="/test" method="post" enctype="multipart/form-data">
    <input type="file" name="thumbnail" id="thumbnail" />
    <button type="submit">Upload</button>
</form>

这样，你应该能够成功上传文件并访问 req.file.path。

回到顶部