В течение некоторого времени я пытался загрузить изображение с сервера Express (на самом деле сервер Express, предоставляемый с сервера GraphQL-Yoga) с помощью почтового запроса Axios согласно многим примерам здесь и в других местах. Вызов сигнализирует об успешном выполнении (ошибка не указана ни на стороне сервера, ни в клиенте React), но изображение не загружается. Любые идеи приветствуются - я уверен, что делаю какую-то глупую ошибку, но я обдумывал это и не понимаю, что я делаю неправильно.
На клиенте у меня
export const downloadHandler = async (file,fileCrypt) => {
const url = `${process.env.REACT_APP_IMAGE_UPLOAD_SERVER}/download`
try {
const response = await axios.post(url, {file, fileCrypt})
console.log(response)
} catch (err) {
throw new Error(err.toString())
}
}
где fileCrypt
- фактическое имя файла на сервере, а file
- оригинальное имя файла, когда он был загружен - базовый URL-адрес REACT_APP_IMAGE_UPLOAD_SERVER = 'http://localhost:4000'
На сервере у меня
app.post(
'/download',
(req,res) => {
const path = `${__dirname}/output/${req.body.fileCrypt.split('.')[0]}.jpg`;
console.log('got this far', path)
res.download(path, req.body.file,err=> {
if (err) console.error(err.toString())
else (console.log(`downloaded file ${path}`))
})
}
)
Обе операторы консоли отлично работают (оператор split должен удалить расширение png
и заменить его на jpg
- мое приложение конвертирует png в jpg)
Когда я отслеживаю ответ на стороне клиента, я получаю
и кажется, что 5,5 МБ загружается, когда я проверяю в Chrome 'Network' - это размер изображения! То есть он загружается, но отправляется в ответ в виде данных?
РЕДАКТИРОВАТЬ: В Firefox, след выглядит следующим образом - кажется, ясно, что изображение передается. Как мне сохранить его на диск? Это проблема установки типа кодировки?
Любая помощь высоко ценится!