我想在我的前端查看(而不是下载)保存在我的后端服务器的文件。
我的Nest应用程序(Typescript)上的控制器(“文档”):
@Get(':id')
async seeUploadedFiled(
@Param('id') id:number,
@Res() res
) {
res.set({"Content-Type": "arraybuffer"})
this.service.getDocument(id).then((response) => {
return res.sendFile(response.path, {root: '.'})
})
}
service.getDocument(id)返回一个对象,这里只需要路径,路径是DiskStorage保存的路径(这里:'上载/{文件名})
我的React应用程序中的提取器( typescript )
const handleVisu = (idDocument: number) => {
client.get('/documents/' +idDocument, {headers: {"Authorization": "Bearer " + loginToken}})
.then((response) => {
//console.log(response.data)
const blobFile = new Blob([response.data], {type: 'application/pdf'})
const blobFileURL = URL.createObjectURL(blobFile)
console.log(blobFileURL) //only for debugging
window.open(blobFileURL)
})
}
它被放在一个按钮“onClick”中。client是一个axios示例。
我已经尝试了很多我在其他帖子上看到的“解决方案”,这是一个似乎起作用,但在我的应用程序上没有:
- 我试着将responseType设置为“application/pdf”,它可以在postman上工作,但我的react应用程序上仍然有一个空白页面。
- 我尝试将responseType设置为“blob”,并使用函数
const handleVisu = (idDocument: number) => {
client.get('/documents/' +idDocument, {headers: {"Authorization": "Bearer " + loginToken}})
.then((response) => {
//console.log(response.data)
const blobFile:Blob = response.data as Blob
const blobFileURL = URL.createObjectURL(blobFile)
console.log(blobFileURL) //only for debugging
window.open(blobFileURL)
})
}
它返回一个类型错误,指出它无法在该类型上创建ObjectURL
- 我也尝试过在后端流式传输文件,但在前端什么也得不到
1条答案
按热度按时间cwtwac6a1#
好吧,显然把“内容类型”放在后端是不够的,你还需要把它放在前端:
就这样...