Angular 18.0.6无法向Express服务器上传图片文件问题排查

我非英语母语，表述可能不够清晰。目前正在开发Angular 18.0.6应用，用Express和MySQL实现CRUD功能，其中需要基于Multer实现文件上传。按文档编写代码后遇到问题：前端已确认能正常打印文件数据，服务端/test接口可正常工作，但/putNewSticker接口终端无任何输出，推测该路径未被访问，问题可能出在Multer配置或POST请求相关代码中。

前端服务代码（Angular） #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PutstickerService {
  private uploadUrl = 'http://localhost:3000/putNewSticker';

  constructor(private http: HttpClient) { }

  uploadImage(sticker: File): Observable<any> {
    console.log(sticker);
    const data = new FormData();
    data.append('sticker', sticker, sticker.name);
    return this.http.post<any>(this.uploadUrl, data);
  }
}

后端路由代码（Express + Multer） #

import express from 'express';
import connection from '../config/database.mjs';
import multer from 'multer';
import path from 'path';

const router = express.Router();

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + path.extname(file.originalname)); // 添加时间戳避免文件名冲突
    }
});

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

router.get('/test', (req, res) => {
    console.log("test");
});

router.post('/putNewSticker', upload.single('sticker'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }

    console.log(`File uploaded: ${req.file.filename}`);
    const filePath = req.file.path.replace('public/', '');
    const sql = 'INSERT INTO stickers (sticker) VALUES (?)';

    connection.query(sql, [filePath], (err, result) => {
        if (err) {
            console.error('Error inserting image path to MySQL:', err);
            return res.status(500).send('Internal Server Error');
        }

        res.send({ message: 'Image uploaded successfully', path: filePath });
    });
});

export default router;

路由挂载代码（Express主文件） #

import express from 'express';
import path from 'path';
import cors from 'cors';
import bodyParser from 'body-parser';
import { fileURLToPath } from 'url';
import { dirname } from 'path';

import indexRouter from './routes/index.mjs';
import usersRouter from './routes/users.mjs';
import stickersRouter from './routes/stickers.mjs';
import putStickerRouter from './routes/putSticker.mjs';

const app = express();

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

app.use(bodyParser.json());
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/', usersRouter);
app.use('/', stickersRouter);
app.use('/', putStickerRouter);

const port = 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

当前排查情况 #

• 前端已确认sticker文件数据正常，控制台可打印
• 服务端/test接口可正常访问，终端能输出test
• /putNewSticker接口终端无任何输出，推测路径未被访问

内容的提问来源于stack exchange，提问作者近藤亮太