Я не являюсь носителем английского языка, поэтому мой английский может быть трудным для чтения.
В настоящее время я разрабатываю приложение 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}`);
});
🤔 А знаете ли вы, что...
Node.js - это среда выполнения JavaScript, разработанная на основе JavaScript V8 движка, созданного Google.
Проблема на сервере: вы монтируете несколько обработчиков маршрутов на одном и том же маршруте: /
, и поскольку порядок имеет значение (те, которые загружены первыми, запускаются первыми), скорее всего, первое промежуточное программное обеспечение - 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