Nodejs中我使用jQuery file upload插件，在node后台为什么使用req.files取不到任何信息？

Nodejs中我使用jQuery file upload插件，在node后台为什么使用req.files取不到任何信息？

5 回复

Nodejs中我使用jQuery file upload插件，在node后台为什么使用req.files取不到任何信息？

在使用jQuery File Upload插件时，如果你发现通过req.files无法获取到上传的文件信息，可能是因为你使用的中间件或配置有误。默认情况下，Express框架中的body-parser中间件并不支持解析文件上传的数据。你需要使用专门处理文件上传的中间件，比如multer。

示例代码

  1. 安装必要的依赖

    首先确保你已经安装了multer：

    npm install multer

  2. 配置Multer

    在你的Node.js应用中配置multer，以便它可以处理文件上传请求：

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

const app = express();

// 配置Multer
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 设置文件存储路径
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now()) // 设置文件名
  }
});

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

// 定义路由来处理文件上传
app.post('/upload', upload.single('file'), (req, res, next) => {
  try {
    console.log(req.file); // 这里应该能看到上传的文件信息
    res.send('File uploaded successfully.');
  } catch (error) {
    next(error);
  }
});

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

  3. 前端HTML表单

    确保你的HTML表单正确设置了enctype="multipart/form-data"属性，这样浏览器才会将表单数据编码为multipart/form-data格式，适合文件上传：

    <form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

  4. 客户端JavaScript

    如果你使用jQuery进行文件选择和提交，确保正确配置：

    $(document).ready(function() {
  $('#uploadForm').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        alert('File uploaded successfully.');
      },
      error: function(err) {
        alert('Error uploading file.');
      }
    });
  });
});

通过以上步骤，你应该能够成功地在Node.js后端通过req.file获取到上传的文件信息。如果仍然存在问题，请检查文件大小限制、文件类型验证等其他可能影响的因素。


1.客户端js代码有没有处理chang事件？ 2.如果有代码，还要看你的客户端js代码确实包含到了upload页面中。可以打开浏览器的控制台查看确认。

感谢回复，我使用了formidable，可以取到文件信息了，但是我用req.body.xx取不到form里其他hidden里的信息了。

解决了，3q

在使用 jQuery File Upload 插件时，如果你发现 req.files 取不到任何信息，通常是因为 Node.js 的默认解析器没有正确处理 multipart/form-data 请求。默认情况下，Express 使用的 bodyParser 中间件在较新版本中已被弃用，你需要使用 multer 这样的中间件来处理文件上传。

示例代码

  1. 安装 multer
npm install multer --save
  1. 配置并使用 multer
const express = require('express');
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' }); // 设置文件存储目录

const app = express();

// 文件上传路由
app.post('/upload', upload.single('file'), (req, res, next) => {
    try {
        console.log(req.file); // 文件信息
        console.log(req.body); // 表单其他数据
        res.send('File uploaded successfully!');
    } catch (error) {
        next(error);
    }
});

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

在这个例子中，upload.single('file') 是一个中间件，它会自动解析请求体中的文件，并将文件信息存入 req.file 对象中，表单中的其他数据则保存在 req.body 中。

解释

  • multer 是一个专门用于处理 multipart/form-data 的 Node.js 中间件，非常适合文件上传。
  • upload.single('file') 指定了文件字段名为 file，这是前端表单中文件输入的 name 属性值。
  • req.file 包含了上传文件的信息，如文件名、原始文件名、大小、路径等。
  • 确保前端表单的 enctype="multipart/form-data"，并且文件输入的 name 属性与 multer 中指定的一致。

通过这种方式，你可以确保文件被正确接收并处理。

回到顶部