使用express Nodejs 上传图片，但是req请求中没有files这个对象，console.log(req.files)为空

使用express Nodejs 上传图片，但是req请求中没有files这个对象，console.log(req.files)为空

bodyparser的设置 ‘app.use(bodyParser.json({ uploadDir:’/images/’, keepExtensions: true, limit: ‘50mb’}));

前端的写法是使用formdata传上来的 $("#myfile").change(function(){ var data = new FormData();
var files = $(’#myfile’)[0].files; \n if(files){ alert(files[0]); data.append(‘codecsv’,files[0]); } $.ajax({
cache: false,
type: ‘post’,
dataType: ‘json’,
url:’/upload’,
data : data,
contentType: false,
processData: false,
success : function () { }
});
});

大家知道怎么导致的files对象为空么？ 在线等回复 急！


5 回复

当使用 Express.js 和 multer 中间件来处理文件上传时，确保正确配置 multer 来解析文件数据。在你的例子中，你可能没有正确地设置 multer。以下是如何正确配置 multer 并处理文件上传的步骤。

示例代码

首先，确保你已经安装了必要的依赖：

npm install express multer

然后，创建一个简单的 Express 应用来处理文件上传：

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

// 创建 Multer 实例
const upload = multer({
    dest: './uploads/', // 存储文件的位置
    limits: {
        fileSize: 1024 * 1024 * 50 // 限制文件大小为50MB
    }
});

const app = express();

// 使用 Multer 中间件处理文件上传
app.post('/upload', upload.single('codecsv'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }

    console.log(req.file);
    res.send('File uploaded successfully.');
});

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

解释

  1. Multer 配置:

    • dest: 指定文件存储位置。
    • limits: 设置文件大小限制。

  2. 中间件:

    • upload.single('codecsv'): 这个中间件用于处理单个文件上传，并将文件存储到 req.file 中。

  3. 路由处理:

    • 在 POST 请求 /upload 处理函数中，检查 req.file 是否存在。如果不存在，则返回错误信息。
    • 如果文件成功上传，输出 req.file 的内容并返回成功消息。

前端代码

前端部分保持不变，确保你的表单数据是通过 FormData 对象正确传递的：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="file" id="myfile">
<button id="upload">Upload</button>

<script>
$(document).ready(function() {
    $('#upload').click(function() {
        var data = new FormData();
        var files = $('#myfile')[0].files;

        if (files.length > 0) {
            data.append('codecsv', files[0]);
            $.ajax({
                cache: false,
                type: 'POST',
                url: '/upload',
                data: data,
                contentType: false,
                processData: false,
                success: function(response) {
                    alert('File uploaded successfully!');
                },
                error: function(error) {
                    alert('Error uploading file.');
                }
            });
        } else {
            alert('Please select a file to upload.');
        }
    });
});
</script>

通过以上配置，你可以正确地处理文件上传，并确保 req.files 或 req.file 对象不会为空。


搞定了 var multipart = require(‘connect-multiparty’); var multipartMiddleware = multipart();

使用这个就可以了

用node原生方法去抓包，自己写解析件，EXPRESS不送FILE解析。

node-formidable

从你的描述来看，问题可能出在以下几个地方：

  1. 缺少文件解析中间件：Express默认不会解析文件上传的内容。你需要安装并使用专门处理文件上传的中间件，如multer。

  2. 错误的body-parser配置：body-parser主要用于解析JSON数据，并不支持文件上传。你需要使用multer或其他适合文件上传的中间件。

示例代码

安装multer

npm install multer --save

后端代码（使用multer）

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

const app = express();

// 设置存储位置
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('codecsv'), (req, res) => {
  console.log(req.file); // 文件信息
  console.log(req.body); // 其他表单数据
  res.send('File uploaded!');
});

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

解释

  1. Multer配置：

    • destination：指定文件存储路径。
    • filename：生成文件名。

  2. 路由配置：

    • upload.single('codecsv')：指定上传的字段名为codecsv。

  3. 处理请求：

    • req.file：包含了上传的文件信息。
    • req.body：包含了其他表单数据。

前端代码

前端的FormData配置看起来是正确的，无需修改。

检查点

  • 确认前端input标签的name属性与后端upload.single的参数一致。
  • 确认服务器端口是否正确监听。
  • 检查上传文件大小是否超过限制。

通过以上步骤，应该能够解决文件上传的问题。

回到顶部