Невозможно опубликовать файл изображения на сервере Express с помощью Angular 18.0.6

Я не являюсь носителем английского языка, поэтому мой английский может быть трудным для чтения.

В настоящее время я разрабатываю приложение Angular (18.0.6) и пытаюсь реализовать CRUD, используя express и mysql. Я пытаюсь реализовать функцию загрузки файлов с помощью Multer. Я искал документацию и писал коды, но я действительно не понимаю, что, черт возьми, происходит.

Вот сервисные компоненты. Данные файла находятся в «наклейке». Я убедился, что данные файла можно отобразить в консоли.

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.info(sticker);
    const data = new FormData();
    data.append('sticker', sticker, sticker.name);
    return this.http.post<any>(this.uploadUrl, data);
  }
}

И затем, это файл mjs, который получает FormData и отправляет данные в MySQL.

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)); // Adds a timestamp to avoid filename conflicts
    }
});

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

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

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

    console.info(`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;

Я помещаю console.info, но в терминале ничего не отображается. Так что я думаю этот путь даже не читал. Я убедился, что «/test» может работать. поэтому я не думаю, что весь этот файл неправильный. около Мультера или почтового индекса.

Я впервые задаю вопрос, поэтому, если вам нужна дополнительная информация, сообщите мне.

Я ожидаю понять, почему путь «/putNewSticker» не может быть прочитан при чтении пути «/test». Я не смогу продолжать развиваться, если у меня не будет ошибок или чего-то в этом роде. Это просто не работает.

Мне действительно нужна помощь. Большое спасибо.

ОТРЕДАКТИРОВАНО

Вот как я монтирую роутер.

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.info(`Server running on port ${port}`);
});