解决Express中req.files返回undefined的图片上传问题

开发全栈博客系统的图片上传功能时，后端无法通过req.files获取上传文件，执行文件重命名时出现**ENOENT（文件不存在）**错误，期望成功获取上传文件并完成上传操作。

相关代码 #

router.post("/rich_editor_upload",async(req,res)=>{
    if (!req.files){
        res.send(
            {
                "errno": 1, 
                "message": 
            }
        )
        return;
    } 
    let files = req.files; ///!!!
    let ret_files = [];
    for (let file of files){ 

        let file_ext = file.originalname.substring(file.originalname.lastIndexOf(".")+1)
        let file_name = genid.NextId()+".”+file_ext 

        fs.renameSync(
            process.cwd()+"/public/upload/temp/"+file.file_name, 
            process.cwd()+"/public/upload/"+file_name
        )
        ret_files.push("/upload/"+file_name)

    }

    res.send(
        {
            "errno": 0, 
            "data": {
                "url": ret_files[0], 

            }
        }
    )

})

module.exports = router  

错误信息 #

$ node app.js
Listening to port:8080
node:fs:1042
  handleErrorFromBinding(ctx);
  ^

Error: ENOENT: no such file or directory, rename 'C:\Users\zhang\Desktop\CS 2023\Blog system\Server/public/upload/temp/undefined' -> 'C:\Users\zhang\Desktop\CS 2023\Blog system\Server/public/upload/468920300437573.jpg'
    at Object.renameSync (node:fs:1042:3)
    at C:\Users\zhang\Desktop\CS 2023\Blog system\Server\routers\UploardRouter.js:40:12
    at Layer.handle [as handle_request] (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\index.js:284:15
    at Function.process_params (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\index.js:346:12)     
    at next (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\index.js:280:10)
    at Function.handle (C:\Users\zhang\Desktop\CS 2023\Blog system\Server\node_modules\express\lib\router\index.js:175:3) {
  errno: -4058,
  syscall: 'rename',
  code: 'ENOENT',
  path: 'C:\\Users\\zhang\\Desktop\\CS 2023\\Blog system\\Server/public/upload/temp/undefined',
  dest: 'C:\\Users\\zhang\\Desktop\\CS 2023\\Blog system\\Server/public/upload/468920300437573.jpg'
}

环境 #

Node.js版本：v18.17.0

1. 配置文件上传中间件 #

Express本身不处理multipart/form-data类型请求，必须借助express-fileupload或multer这类中间件，否则req.files必然返回undefined。

方案一：使用express-fileupload

• 安装依赖：npm install express-fileupload
• 在Express入口文件（如app.js）中配置：

  const fileUpload = require('express-fileupload');
  app.use(fileUpload({
    useTempFiles: true, // 开启临时文件存储
    tempFileDir: './public/upload/temp/' // 指定临时目录，需确保目录存在
  }));
  

方案二：使用multer

• 安装依赖：npm install multer
• 配置存储和路由中间件：

  const multer = require('multer');
  const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, './public/upload/temp/')
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname)
    }
  })
  const upload = multer({ storage: storage });
  // 在路由中挂载中间件
  router.post("/rich_editor_upload", upload.array('files'), async(req,res)=>{
    // 后续业务逻辑
  })
  

2. 修复代码中的字段名与语法错误 #

错误信息中的undefined是因为误用了file.file_name（临时文件路径字段应为file.tempFilePath），同时文件名拼接时用了中文句号，需修正为英文句号：

for (let file of files){ 
    let file_ext = file.originalname.substring(file.originalname.lastIndexOf(".")+1)
    let file_name = genid.NextId() + "." + file_ext; // 修正中文句号

    // 使用tempFilePath获取正确的临时文件路径
    fs.renameSync(
        file.tempFilePath, 
        process.cwd() + "/public/upload/" + file_name
    )
    ret_files.push("/upload/" + file_name)
}

3. 确保上传目录存在 #

执行文件操作前，检查并创建所需目录：

const fs = require('fs');
const path = require('path');

// 递归创建上传目录和临时目录
const uploadDir = path.join(process.cwd(), 'public', 'upload');
const tempDir = path.join(uploadDir, 'temp');
if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });

4. 验证前端请求格式 #

确保前端发送的请求是multipart/form-data类型，且文件字段名与后端配置一致（比如用multer时，需对应upload.array('files')中的files字段名）。

内容的提问来源于stack exchange，提问作者Wei Zhang