Блог

В моем приложении MERN я пытаюсь получить доступ к изображениям на стороне клиента, которые были сохранены в локальной базе данных с помощью multer. Структура моей внутренней папки выглядит следующим образом:

 --- api
    --- controllers
    --- model
    --- routes
--- config
    --- db.js
    --- appConfig.js
--- utils
    --- uploads
    --- multerMiddleware.js
--- app.js
  

Загрузка и сохранение изображений в локальную базу данных работает абсолютно нормально. При создании новых данных данные, полученные клиентом в ответе API, содержат URL загруженного изображения, чтобы к нему можно было снова получить доступ (например, для отображения миниатюр изображения).

Мой код выглядит так:

App.js

 const express = require("express");
const path = require('path');

const app = express();
const directory = path.join(__dirname, '/uploads');
app.use('/uploads', express.static(directory));

require("./config/db/db")();
require("./config/appRoutes/appRoutes")(app);

module.exports = app;
  

multerFile.js

 const multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, __dirname   '/uploads')
    },
    filename: function (req, file, cb) {
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, fileName);
    }
});
const upload = multer({
    storage
});

module.exports = upload;
  

контроллер

 exports.createService = async (req, res) => {

    const service_name = req.body.main_name;

    const url = req.protocol   '://'   req.get('host');

    let service_pic;
    if (req.file) {
        service_pic = url   '/utils/uploads/'   req.file.filename;
    }

    try {

        const service = new Services({
            _id: new mongoose.Types.ObjectId(),
            service_name,
            service_pic
        });

        const new_service = await service.save();

        res.status(201).json({ message: "New data created", result: new_service });

    } catch (error) {
        console.log(error);
        res.status(500).json({ message: "Internal server error", error });
    }
}
  

С маршрутом, http://localhost:5000/services/all я получаю данные JSON в виде:

 {
   createdAt: "2020-09-07T08:25:11.581Z"
   service_name: "TEST"
   service_pic: "http://localhost:5000/utils/uploads/testio-logo-rgb1.png"
   updatedAt: "2020-09-07T08:25:11.581Z"
}
  

Когда я пытаюсь получить доступ http://localhost:5000/utils/uploads/testio-logo-rgb1.png , он всегда возвращает ошибку: "error":{"message":"Route Not found"}} . Изображения правильно хранятся в /uploads папке, но по-прежнему недоступны на клиенте.

Я не уверен, что происходит не так. Приветствуется любая помощь в решении этой проблемы.

Измените '/uploads' на 'utils/uploads'

 // app.js
const directory = path.join(__dirname, 'utils/uploads');
app.use('/uploads', express.static(directory));
  

Этот блок кода означает: вы настроили конечную точку, обслуживающую статические ресурсы в /uploads . Каждый раз, когда запрос попадает в эту конечную точку, ваш сервер будет искать нужную папку /utils/uploads .
Примером запроса может быть: http://localhost:5000/uploads/testio-logo-rgb1.png

Я считаю, что ваш URL неверен,

http://localhost:5000/utils/uploads/testio-logo-rgb1.png

должно быть

http://localhost:5000/uploads/testio-logo-rgb1.png