基于Express+Multer的入门OCR应用 上传PNG未存至uploads目录求解决

核心问题定位 #

• HTML表单闭合位置错误：原代码中<form>标签写完属性后直接闭合，后续的文件选择框、提交按钮都在表单外部，提交时不会携带文件数据到后端，multer无法接收文件完成存储
• 目标存储目录未预先创建：multer的diskStorage配置不会自动生成./uploads目录，若该文件夹不存在，上传操作会直接报错，而当前代码未打印错误信息，无法排查异常
• 次要配置问题：端口优先级写法错误、上传回调未处理错误也未返回响应，会导致请求挂起，不影响核心上传逻辑

修正后代码 #

前端HTML代码（修正表单闭合） #

<!DOCTYPE html>
<html lang='zh-CN'>
  <head>
    <meta charset="UTF-8">
    <meta name='viewport' content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片转PDF</title>
  </head>
  <body>
      <h1>图片转PDF</h1>
      <!-- 修正：将表单闭合标签移到所有表单元素之后 -->
      <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="avatar" />
        <button type="submit">转换</button>
      </form>
  </body>
</html>

后端JavaScript代码（补充目录自动创建、错误处理） #

// 所有依赖导入
const express = require('express');
const app = express();
const fs = require('fs');
const multer = require('multer');
const {TesseractWorker} = require("tesseract.js");
const worker = new TesseractWorker();

// 存储配置
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        const uploadDir = './uploads';
        // 自动判断并创建存储目录
        if (!fs.existsSync(uploadDir)) {
            fs.mkdirSync(uploadDir, { recursive: true });
        }
        cb(null, uploadDir);
    },
    filename: (req,file,cb) => {
        cb(null, file.originalname);
    }
});
const upload = multer({storage: storage}).single('avatar');

app.set('view engine', "ejs");

// 路由配置
app.get('/', (req,res) => {
    res.render('index');
});

app.post('/upload', (req ,res) => {
    upload(req ,res, err => {
        // 打印上传异常，便于排查
        if (err) {
            console.error('上传错误：', err);
            return res.status(500).send('文件上传失败');
        }
        console.log('接收到的文件信息：', req.file);
        // 返回响应避免请求挂起
        res.send('文件上传成功');
    });
});

// 修正端口优先级：优先读取环境变量端口，无配置时默认5000
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`服务已在端口 ${PORT} 启动`));

额外注意事项 #

• 若不使用代码自动创建目录，可手动在项目根目录新建uploads文件夹，确保目录有读写权限
• 上传成功后可在控制台打印的req.file信息中确认文件实际存储路径，避免路径引用错误

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