Nodejs 大家帮我看看这段代码，为什么返回的files.imgFile是undefined

Nodejs 大家帮我看看这段代码，为什么返回的files.imgFile是undefined

app.post(’/uploadImg’,function(req, res, next){ console.log(req.body.localUrl);//成功 console.log(req.files.imgFile.path);//成功

    var form = new formidable.IncomingForm();
    form.keepExtensions = true;//保留后缀 .jpg/.png

    
    var folderName = new Date().Format('yyyy-MM-dd');
    var dirPath = __dirname+"/../public/uploadimg/"+folderName+"/";

    console.log(dirPath);
    if(!fs.existsSync(dirPath)){//如果没有这个文件夹就创建文件夹
        fs.mkdirSync(dirPath);
    }

    form.uploadDir = dirPath;//设置文件上传的目录

    form.parse(req, function(err, fields, files){
        console.log(files.imgFile);//问题出现在这里，怎么返回的是undefined?
        var filePath = files.imgFile.path.replace(/\\/g, '/');
        var resPath = '/uploadimg/'+folderName+'/'+filePath.substring(filePath.lastIndexOf('/')+1);
        res.send({"error":0,"url":resPath});
    })
})

5 回复

要解决这个问题，我们需要确保 req.files 被正确地解析并填充。在你的代码中，form.parse(req, ...) 应该能够正确地处理上传的文件。然而，如果你发现 files.imgFile 是 undefined，可能是因为表单数据没有被正确地解析。

解决方案

  1. 确保表单数据被正确提交：确保你使用的是带有 enctype="multipart/form-data" 的 HTML 表单来提交文件。
  2. 检查中间件配置：确保你已经正确地配置了 multer 或其他用于处理文件上传的中间件。

示例代码

假设你使用的是 multer 来处理文件上传，以下是修改后的代码：

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) {
        const folderName = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
        const dirPath = path.join(__dirname, '../public/uploadimg', folderName);

        if (!fs.existsSync(dirPath)) {
            fs.mkdirSync(dirPath);
        }
        cb(null, dirPath);
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

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

app.post('/uploadImg', upload.single('imgFile'), function (req, res, next) {
    console.log(req.body.localUrl); // 成功
    console.log(req.file); // 确保这里能打印出文件信息

    if (!req.file) {
        return res.status(400).send({ error: 1, message: 'No file uploaded' });
    }

    const filePath = req.file.path;
    const resPath = '/uploadimg/' + new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') + '/' + req.file.filename;

    res.send({ error: 0, url: resPath });
});

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

解释

  1. Multer 配置：

    • destination 函数用于创建存储文件的目录。
    • filename 函数用于生成文件名。

  2. 路由处理：

    • 使用 upload.single('imgFile') 中间件来处理单个文件上传。
    • 在回调函数中，通过 req.file 访问上传的文件信息。
    • 如果 req.file 不存在，则返回错误信息。

这样可以确保 req.file 能够正确地包含上传的文件信息，从而避免 files.imgFile 为 undefined 的问题。


files难道不是个数组？你不应该通过files[0]这种方式看吗？

不是，是一个对象！应该是图片没传上去的原因，怎样将文件传到指定文件夹啊？我倒是在临时文件夹看到了图片的身影！

files 对象就是你上传的文件集合，files里面到底是什么，console出来看看， 不一定叫imgFile, 叫什么取决于你post的时候设置的input框的name

从你的描述来看，问题可能出在 formidable 解析请求体之前，req.files 已经被其他中间件或代码处理过。默认情况下，req.files 是由 formidable 中间件填充的。你需要确保在调用 form.parse 之前没有其他逻辑处理 req.files。

你可以尝试以下几种方法来解决这个问题：

方法一：确保在解析请求之前没有其他中间件处理 req.files

确保你的中间件顺序正确，并且没有其他中间件在 formidable 之前已经处理了 req.files。例如，确保你的代码中没有这样的中间件：

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

const app = express();

app.use(express.urlencoded({ extended: true })); // 如果你使用了这个中间件，可能会覆盖 req.files
app.post('/uploadImg', (req, res) => {
    const form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        console.log(files.imgFile); // 确保这里能打印出文件信息
        // 其他逻辑...
    });
});

app.listen(3000);

方法二：确保 formidable 中间件按顺序执行

确保 formidable 中间件在你处理 req.files 的逻辑之前被正确调用。你可以在你的应用中单独定义一个中间件函数来处理文件上传：

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

const app = express();

const fileUploadMiddleware = (req, res, next) => {
    const form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        if (err) return next(err);
        req.files = files; // 将解析后的文件对象赋值给 req.files
        next();
    });
};

app.use(fileUploadMiddleware);

app.post('/uploadImg', (req, res) => {
    console.log(req.files.imgFile); // 应该可以正确获取到文件信息
    // 其他逻辑...
});

app.listen(3000);

方法三：检查请求类型

确保客户端发送的请求类型为 multipart/form-data，因为 formidable 只能解析这种类型的请求。

通过以上步骤，你应该能够解决 files.imgFile 为 undefined 的问题。如果问题仍然存在，请检查是否有其他逻辑或中间件干扰了文件上传过程。

回到顶部