根据这里和其他地方的许多示例,我一直在尝试使用Axios发布请求从Express服务器(实际上是从GraphQL-Yoga服务器公开的Express服务器)下载图像。该调用表示成功(服务器端或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)
当我找出响应客户端时,我得到了
,当我检查Chrome的“网络”时,似乎正在下载5.5 MB,这是图像的大小!所以它正在下载,但在响应中作为数据发送?
编辑:在Firefox中,跟踪如下:看来图像正在传递。如何将其保存到磁盘?这是设置编码类型的问题吗?
任何帮助,不胜感激!