Я надеюсь, что ответ на эту проблему очень прост.
Итак, я создаю приложение на основе MongoDB, Node, Express, React и т. Д., Но не могу понять, как правильно настроить и отобразить аватар пользователя после того, как он его загрузит.
У меня есть готовая конечная точка API для загрузки аватара, которая при ударе по запросу успешно загружает изображение. (с помощью промежуточного программного обеспечения) Я также правильно храню его в MongoDB. Дело в том, что в настоящее время это выглядит так, и я уверен, что не должно:
В состоянии Redux:
avatar(pin): "C:\Users\Kuba\Desktop\mern_project\client\public\avatars\uploads\profileAvatar-1558374898723.jpeg"
Итак, как должен выглядеть путь к загруженному изображению, чтобы я мог успешно отобразить его в React (создан с помощью create-реагировать-приложение, если это поможет). В какой папке хранить загруженные изображения?
Это мой путь к аватару по умолчанию, который работает довольно хорошо, но он был просто реализован путем импорта в компонент React.
avatar(pin): "/static/media/template-avatar2.173d1842.svg"
Изображение структуры проекта
Клиент - это интерфейс, конечная точка API в маршрутах / api / profile.js
Я ценю любую помощь.
Ниже маршрут
router.post(
"/avatar",
passport.authenticate("jwt", { session: false }),
upload.single("avatar"),
(req, res) => {
const errors = {};
// Path to the avatar is in req.file.path
if (!req.file.path) {
errors.avatar = "Wrong file format";
return res.status(404).json(errors);
}
const avatarPath = req.file.path;
Profile.findOne({ user: req.user.id })
.then(profile => {
if (profile) {
Profile.findOneAndUpdate(
{ user: req.user.id },
{ $set: { avatar: avatarPath } },
{ new: true }
)
.then(profile => {
res.json(profile);
})
.catch(err => res.json(err));
} else {
errors.noprofile = "Couldn't find the profile";
res.status(404).json(errors);
}
errors.noprofile = "Couldn't find the profile";
})
.catch(err => res.status(404).json(errors));
}
);
Настройки Multer
const multer = require("multer");
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "./client/src/img/uploads/avatars");
},
filename: (req, file, cb) => {
cb(
null,
file.fieldname + "-" + file.filename + "." + file.mimetype.slice(6)
);
}
});
const fileFilter = (req, file, cb) => {
if (file.mimetype === "image/jpeg" || file.mimetype === "image/png")
cb(null, true);
else {
// reject a file
let errors = {};
cb(
new Error(
(errors.avatar = "Wrong filetype, only png and jpg types are eligible")
),
false
);
}
};
// Upload avatar middleware
const upload = multer({
storage,
limits: {
fileSize: 1024 * 1024 * 2
},
fileFilter
});
РЕДАКТИРОВАТЬ: Хорошо, я изменил путь в Multer на относительный, теперь выглядит так, все еще не работает.
avatar(pin): "client\src\img\uploads\avatars\avatar-undefined.png"