Как преобразовать объект BLOB-объекта в шаблон EJS

Question 1

Я работаю над загрузкой фотографий пациентов, используя экспресс, mongodb, multer, ejs иcroppiejs. Когда пользователь загружает фотографию, у него есть возможность обрезать ее. Я сохраняю обрезанное фото в коллекции как объект BLOB в поле с именем croppedPhoto.

Теперь я хочу отобразить эту обрезанную фотографию во внешнем интерфейсе. Я передаю объект пациентов (который содержит все поля данных записи, включая обрезанное фото).

Я думаю о преобразовании этого объекта blob в base64 и его отображении. Но проблема в том, что я не уверен, как использовать значение поля croppedPhoto в шаблоне ejs для его преобразования.

server.js [Поиск всех пациентов и переход к шаблону ejs — также включает полеcropedPhoto]

app.get('/', async (req, res) => {
    const patients = await Patient.find();
    res.render('index', { patients: patients });
});

index.ejs [хотите отобразить фото в теге img]

<div class="flex flex-wrap mt-10">
    <% patients.forEach(patient => { %>
    <div
        class="flex flex-col items-center justify-center h-auto lg:h-auto lg:w-32 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden">
        <img src="<%= patient.croppedPhoto %>" class="my-3 w-20 h-20 rounded-full" alt="Patient Photo">
    </div>
    <% }) %>
</div>

Благодарность!!

node.js express blob ejs multer

1

Navdeep Singh 1 Май 2020 в 07:45

Answer

Обычно, когда дело доходит до загрузки файлов на сервер, вам следует избегать сохранения самого файла в базе данных, вместо этого вы можете переместить файл с рабочего стола клиента в нужный каталог (папка с изображениями вашего приложения, где вы храните изображения). ) с помощью Экспресс-загрузки файлов и сохранить path этого файла в базе данных обычно это будет примерно так: /images/test.png .

Вот пример:

router.route('/add').post(function (req, res) {
if (req.files && req.body.name) {
    var file = req.files.file
    // to move the file to the direct i want !
    file.mv("client/public/img/client/categories/" + file.name, err => {
        if (err) {
            console.error(err);
            return res.status(500).send(err);
        }
    });
    var newCategorie = new Categorie({
        name: req.body.name,
        imgUrl: "/img/client/categories/" + file.name // TO SAVE THE PATH
    });


    }
   newCategorie
        .save()
        .then(categories => res.json(categories))
        .catch(err => res.status(400).json('Error: ' + err));
} else {
    res.status(400).json({ msg: "Please enter all fields" });
}
});

Тогда в вашем шаблоне EJS будет очень легко получить доступ к src изображения: <img src="OBJECT.ImgURL" />

0

EL-Mehdi Loukach 1 Май 2020 в 12:29

Привет Джесси, спасибо за ваш ответ. Я уже знаю, как сохранить изображение в каталоге с помощью multer. Я просто хотел попробовать сценарий, в котором он сохраняется в БД.

–

Navdeep Singh

3 Май 2020 в 07:27

Question 2

Обычно, когда дело доходит до загрузки файлов на сервер, вам следует избегать сохранения самого файла в базе данных, вместо этого вы можете переместить файл с рабочего стола клиента в нужный каталог (папка с изображениями вашего приложения, где вы храните изображения). ) с помощью Экспресс-загрузки файлов и сохранить path этого файла в базе данных обычно это будет примерно так: /images/test.png .

Вот пример:

router.route('/add').post(function (req, res) {
if (req.files && req.body.name) {
    var file = req.files.file
    // to move the file to the direct i want !
    file.mv("client/public/img/client/categories/" + file.name, err => {
        if (err) {
            console.error(err);
            return res.status(500).send(err);
        }
    });
    var newCategorie = new Categorie({
        name: req.body.name,
        imgUrl: "/img/client/categories/" + file.name // TO SAVE THE PATH
    });


    }
   newCategorie
        .save()
        .then(categories => res.json(categories))
        .catch(err => res.status(400).json('Error: ' + err));
} else {
    res.status(400).json({ msg: "Please enter all fields" });
}
});

Тогда в вашем шаблоне EJS будет очень легко получить доступ к src изображения: <img src="OBJECT.ImgURL" />

0

EL-Mehdi Loukach 1 Май 2020 в 12:29

Привет Джесси, спасибо за ваш ответ. Я уже знаю, как сохранить изображение в каталоге с помощью multer. Я просто хотел попробовать сценарий, в котором он сохраняется в БД.

–

Navdeep Singh

3 Май 2020 в 07:27

Как преобразовать объект BLOB-объекта в шаблон EJS

1 ответ

Похожие вопросы

Новые вопросы

node.js