Как загружать файлы изображений в Postman и возвращать то же изображение с помощью Express и Multer
Я пытаюсь загрузить продукт с помощью почтальона и каждый раз, когда я отправляю; он отправляет обратно все данные с изображением undefined, как показано на этом снимке экрана:
Мой файл контроллера:
const gameRepository = require("../routes/repository")
exports.createGame = async (req, res, next) => {
try {
const PORT = 8000;
const hostname = req.hostname;
const url = req.protocol + '://' + hostname + ':' + PORT + req.path;
const payload = ({
name: req.body.name,
price: req.body.price,
category: req.body.category,
gameIsNew: req.body.gameIsNew,
topPrice: req.body.topPrice,
isVerOrient: req.body.IsVerOrient,
description: req.body.description,
image: url + '/imgs/' + req.path
});
let eachGame = await gameRepository.createGame({
...payload
});
console.info(req.body)
res.status(200).json({
status: true,
data: eachGame,
})
} catch (err) {
console.info(err)
res.status(500).json({
error: err,
status: false,
})
}
}
repository.js:
const Game = require("../models/gameModel");
exports.games = async () => {
const games = await Game.find();
return games;
}
exports.gameById = async id => {
const game = await Game.findById(id);
return game;
}
exports.createGame = async payload => {
const newGame = await Game.create(payload);
return newGame;
}
exports.removeGame = async id => {
const game = await Game.findById(id);
return game;
}
Multer.js:
const multer = require("multer");
const path = require("path");
// checking for file type
const MIME_TYPES = {
'imgs/jpg': 'jpg',
'imgs/jpeg': 'jpeg',
'imgs/png': 'png'
}
// Image Upload
const storage = multer.diskStorage({
destination: (req, file, cb ) => {
cb(null, path.join('../imgs'));
},
filename: (req, file, cb) => {
const name = file.originalname.split('').join(__);
const extension = MIME_TYPES[file.mimetype];
cb(null, name + new Date().toISOString() + '.' + extension);
}
});
module.exports = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 6
},
})
Я не уверен, где я ошибся, поэтому мне нужен внешний глаз, чтобы определить, откуда исходит ошибка.
У меня есть ощущение, что мне нужно использовать body-parser или правильно перейти в папку с изображениями, или многокомпонентную форму, я не уверен.
Спасибо за обращение! Я добавил / к изображению и все равно получил те же результаты. И вы предлагаете мне удалить const url = req.protocol + '://' + hostname + req.body.path; ?
Я добавил коды из других файлов, чтобы предоставить больше информации.
ваш URL-адрес не работает @GODSWILL, он должен читаться const url = req.protocol + '://' + hostname + ":" + PORT + req.path. Вы используете req.body.path, и вы можете видеть, что он сломан, поскольку он возвращает undefined на вашем скриншоте. Вы должны использовать req.path или req.originalUrl в зависимости от интересующих вас частей объекта URL.
Спасибо, @rags2riches, нужно ли создавать новую переменную для PORT?
@GODSWILL да, это порт, который слушает ваш сервер. В вашем первом фрагменте просто объявите и инициализируйте const PORT = 3000 (независимо от номера порта), а затем используйте его в своем константном URL-адресе. Убедитесь, что вы также изменили свойство изображения полезной нагрузки, чтобы отразить URL-адрес изображения... ясно?
@GODSWILL Теперь вопрос в том, в чем здесь настоящая проблема, сломанный путь или что-то еще?
Я следовал инструкциям, которые вы мне предоставили, но я получаю: «image»: «localhost: 8000/game/imgs//game» в почтальоне, а в моей папке «imgs» нет изображения. Я отредактирую свой код, чтобы показать вам, что я сделал
@ rags2riches проблема сейчас в том, когда я загружаю; Я получаю данные, отправленные в MongoDB, но изображение не включается и не отображается в папке, которую я создал для изображений в моем рабочем каталоге.
но URL-адрес теперь отображается правильно?
Я не уверен, что правильно, но у меня есть: «image»: «localhost: 8000/game/imgs//game», при этом игра отображается дважды. Это правильно?
@GODSWILL эта строка в вашей полезной нагрузке... image: url + '/imgs/' + req.path теперь должна быть просто image: url. Вы уже построили URL-адрес для этого ранее
@GODSWILL изображение не отображается в почтальоне, потому что вы отправляете обратно полезную нагрузку, но не изображение. Multer настроен правильно, но вы не используете его для загрузки изображения в любом месте кода, который вы показали.
@ rags2riches, можете ли вы предложить решение, чтобы заставить его работать? как правильно настроить код для загрузки изображения?
@rags2riches Я постоянно получал «ошибку»: «Multipart: Boundary not found», вот репозиторий github github.com/Godswill199/scratch9ja.git
@rags2riches Большое спасибо за вашу помощь. Я понял. ошибка была из-за функции обратного вызова хранилища в файле multer.js. ошибка: ```cb(null, ${new Date().toISOString()}.${extension}); ``` исправление: ``` cb(null, ${new Date().toISOString().replace(/:/g,'-')}.${extension}); ``` Я добавил двоеточие в дату моего изображения с дефисом в функции обратного вызова хранилища. Я отредактирую свой вопрос в рабочем коде. Большое спасибо, @AbrarHossain и @rags2riches
Ответы 1
после многих попыток и неудач я, наконец, понял это. оказывается, у него есть проблемы совместимости в зависимости от вашей ОС.
Я использую Windows 10, и это решило проблему для меня.
Вот мой рабочий код:
multer.js
const multer = require("multer");
const path = require("path");
// checking for file type
const MIME_TYPES = {
'image/jpg': 'jpg',
'image/jpeg': 'jpeg',
'image/png': 'png'
}
// Image Upload
const storage = multer.diskStorage({
destination: (req, file, cb ) => {
cb(null, ('storage/imgs/'));
},
filename: (req, file, cb) => {
const extension = MIME_TYPES[file.mimetype];
// I added the colons in the date of my image with the hyphen
cb(null, `${new Date().toISOString().replace(/:/g,'-')}.${extension}`);
}
});
module.exports = multer({
storage: storage
})
В моем контроллере.js
const gameRepository = require("../routes/repository");
exports.createGame = async (req, res, next) => {
try {
const payload = {
name: req.body.name,
price: req.body.price,
category: req.body.category,
gameIsNew: req.body.gameIsNew,
topPrice: req.body.topPrice,
isVerOrient: req.body.IsVerOrient,
description: req.body.description,
image: req.file.filename,
};
let eachGame = await gameRepository.createGame({
...payload,
});
res.status(200).json({
status: true,
data: eachGame,
});
} catch (err) {
console.info(err);
res.status(500).json({
error: err,
status: false,
});
}
};
exports.getGames = async (req, res) => {
try {
let games = await gameRepository.games();
res.status(200).json({
status: true,
data: games,
});
} catch (err) {
console.info(err);
res.status(500).json({
error: err,
status: false,
});
}
};
exports.getGameById = async (req, res) => {
try {
let id = req.params.id;
let gameDetails = await gameRepository.gameById(id);
req.req.status(200).json({
status: true,
data: gameDetails,
});
} catch (err) {
res.status(500).json({
status: false,
error: err,
});
}
};
exports.removeGame = async (req, res) => {
try {
let id = req.params.id;
let gameDetails = await gameRepository.removeGame(id);
res.status(200).json({
status: true,
data: gameDetails,
});
} catch (err) {
res.status(500).json({
status: false,
data: err,
});
}
};
:
Спасибо этому замечательному сообществу.
Вы упомянули multer для загрузки файлов, но ваш код не показывает промежуточное программное обеспечение multer. Пожалуйста, добавьте достаточно кода, чтобы упростить отладку примера.