无法使用 Angular 18.0.6 将图像文件发布到 Express 服务器

Question

我的母语不是英语，所以我的英语可能很难读懂。

我目前正在开发Angular（18.0.6）应用程序并尝试使用express和mysql实现CRUD。 我正在尝试使用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.log(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.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;

我输入了 console.log 但终端中没有显示任何内容。所以我认为这条路根本就没有读过。 我确保“/test”可以工作。所以我不认为整个文件是错误的。就在 multer 或邮政编码附近。

这是我第一次提问，如果您需要更多信息，请告诉我。

我希望了解为什么读取“/test”路径时无法读取“/putNewSticker”路径。 如果我不能出现错误或其他什么情况，我就无法继续开发。 它只是不起作用。

我真的需要帮助。非常感谢。

已编辑

这就是我安装路由器的方式。

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}`);
});

Answer 1

问题出在服务器上：您在同一路由上安装多个路由处理程序：

/

，并且由于顺序很重要（先加载的，先运行），很可能第一个中间件 -

indexRouter

- 吞咽所有请求，永远不会到达

stickers

处理程序，很可能它完成了响应，或者如果没有，则处于待处理状态。

因此，尝试更改每条路线的路线路径，例如：

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/stickers', stickersRouter);
app.use('/put-stickers', putStickerRouter);

并相应地请求 URL：

private uploadUrl = 'http://localhost:3000/put-stickers/putNewSticker';

参见：

中间件加载顺序很重要：中间件函数 先加载的也先执行。

如果myLogger是在路由到根路径之后加载的，则请求 永远不会到达它，应用程序不会打印“LOGGED”，因为路线 根路径的处理程序终止请求-响应周期。

编写用于 Express 应用程序的中间件