Wysyłanie i odbieranie zdjęć z serwera API - expressjs

Question

Cześć. Mam problem z zaimplementowaniem systemu dodawania i wyświetlania zdjęcia profilowego użytkownika przechowywanego w bazie mongodb.

Stack:
- angular: frontend
- expressJS (typescript): backend
- mongoDB: baza danych

Nie wchodząc w szczegóły. Wysłanie zdjęcia z kontrolera działa, plik jest umieszczany w src/public/images, jednak z odebraniem trochę ciężej, gdyż trzeba zdefiniować ścieżkę absolutną. __dirname nie działa, ponieważ router odpowiedzialny za wywołanie zdjęcia znajduje się w src/app/controller, a jakiekolwiek próby modyfikacji tej ścieżki kończą się błędami - ścieżka musi być absolutna.

Czy ma ktoś jakieś pomysły? Gotowe przykłady? Od dwóch dni się z tym męczę i powoli dochodzę do wniosków, że express kompletnie się nie nadaje do budowy backendów.

server.ts

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

app.get("/", async (req: Request, res: Response) => {
  return res.status(200).send({ message: "EMS Server is working!" });
});
// routes
app.use(`${routePrefix}/auth`, employeeAuthController);
app.use(`${routePrefix}/employee`, employeeController);

 

controller.ts

router.post('/uploadImage', imageUpload.single('image'), (req:any, res:any) => {
  res.send(req.file)
}, (error: any, req: any, res: any, next: any) => {
  res.status(400).send({ error: error.message })
});

router.get("/avatar/:fileName", async (req: Request, res: Response) => {
  res.sendFile(__dirname + '/public/images/' + req.params.fileName);
  // tutaj nie wiem jak zdefiniować ścieżkę!!!
  // tutaj nie wiem jak zdefiniować ścieżkę!!!
});

 

fileSender.ts

const imageStorage = multer.diskStorage({
  destination: 'src/public/images',
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '_' + Date.now() + path.extname(file.originalname))
  }
});

export const imageUpload = multer({
  storage: imageStorage,
  limits: {
    fileSize: 1000000 // 1000000 Bytes = 1 MB
  },
  fileFilter(req, file, cb) {
    if (!file.originalname.match(/\.(png|jpg)$/)) {
       // upload only png and jpg format
       return cb(new Error('Please upload a Image'))
     }
   cb(undefined, true)
}
});

Z góry dzięki za pomoc!

Answer 1

jednak z odebraniem trochę ciężej, gdyż trzeba zdefiniować ścieżkę absolutną. __dirname nie działa, ponieważ router odpowiedzialny za wywołanie zdjęcia znajduje się w src/app/controller, a jakiekolwiek próby modyfikacji tej ścieżki kończą się błędami - ścieżka musi być absolutna

Próbowałeś owinąć __dirname w metodę path.resolve(..)?

Comments

Tak wszystkiego próbowałem i właśnie znalazłem działające rozwiązanie:
res.sendFile(`${process.cwd()}/src/public/images/${req.params.fileName}`);

process.cwd() wyświetla zawsze absolutną ścieżkę do pliku uruchamiającego serwer.

Żenujące jest to jak słabe express / node ma wsparcie dla plików + ich przestarzała i niekompletna dokumentacja.

Ale dziękuję, za odpowiedź!

---

process.cwd() wyświetla zawsze absolutną ścieżkę do pliku uruchamiającego serwer

W jednej z odpowiedzi na StackOverflow jest przydatna tabelka z różnicami poszczególnych sposobów na dostanie się do głównej ścieżki projektu. Stamtąd już łatwiej dostać się do szukanego zasobu.

Żenujące jest to jak słabe express / node ma wsparcie dla plików + ich przestarzała i niekompletna dokumentacja.

Co masz na myśli? Node ma dość sporą dokumentację i jest ona podzielona na poszczególne wersje - może czytałeś dokumentację od innej wersji niż używasz?