Reactjs Express+;React | Googleapis-下载文件
我是React组件的新手,我试着从我的google drive文件夹下载文件,在很长一段时间后,我一直在使用我的API来上传和获取文件。我的问题是,我应该如何传递数据以下载前端上的文件 如何从我的谷歌硬盘中获取文件,并在react组件上下载 提前谢谢,很抱歉我的解释,我不知道我目前正在做什么与文件 注意:这段代码只是下载图像的示例,我想传递一个文件ID来下载任何东西,PDF、文档、png等等Reactjs Express+;React | Googleapis-下载文件,reactjs,express,frontend,backend,drive,Reactjs,Express,Frontend,Backend,Drive,我是React组件的新手,我试着从我的google drive文件夹下载文件,在很长一段时间后,我一直在使用我的API来上传和获取文件。我的问题是,我应该如何传递数据以下载前端上的文件 如何从我的谷歌硬盘中获取文件,并在react组件上下载 提前谢谢,很抱歉我的解释,我不知道我目前正在做什么与文件 注意:这段代码只是下载图像的示例,我想传递一个文件ID来下载任何东西,PDF、文档、png等等 更新:在Triing differents solutions之后,我的api函数完成如下: goog
更新:在Triing differents solutions之后,我的api函数完成如下:
google_Ctrl.getDownload = async(req, res) => {
console.log(req.params);
let Google = await drive.files.get(
{fileId: req.params.id,
alt: 'media'},
{ responseType: 'stream' }
).then((request) => {
console.log(request);
fileType = request.headers['content-type'];
fileName = ( "file" + '.' + fileType );
fileData = request.data;
res.set(request.headers)
// res.set("Content-Type", fileType);
// res.set("Content-Disposition", "attachment; filename='archivo.png'");
fileData.pipe(res)
});
}
我的函数当前正在工作,当我使用api.rest发送GET请求时,他们会提供我的文件。但现在我的问题是关于React组件,我读了很多帖子,但我没有找到解决方案,我目前正在使用downloadjs尝试,但没有成功
const DownloadFile = () => {
axios.get(process.env.REACT_APP_API_URL + 'google/download/' + "1YtDWD9hNEgCUi8YGQPjV98sULhyM5m8C")
.then((res) => {
console.log(res);
// res.blob()
// fileDownload(res.data, 'filename.png');
download(res.data, "file.png", res.headers['content-type']);
}).catch((error) =>{
console.error(error);
message.error('upload failed.');
});
}
这是我在React组件上的下载功能,我的.txt文件可以工作,但当我尝试下载pdf、文档、xlsx等文件时,我能做什么?
使用Api.rest,我测试了我的Api函数,它运行正常,我可以从Api.rest下载我的文件,但我想我的react函数显然格式不好
好的,在长时间检查代码后,我在React函数中发现了错误,如果有人处于相同的位置,代码如下: API谷歌:
google_Ctrl.getDownload = async(req, res) => {
console.log(req.params);
console.log(req.body);
let Google = await drive.files.get(
{fileId: req.params.id,
alt: 'media'},
{ responseType: 'stream' }
).then((request) => {
console.log(request);
fileType = request.headers['content-type'];
fileName = ( "file" + '.' + fileType );
fileData = request.data;
// res.set(request.headers)
console.log(fileType);
res.set("Content-Type", fileType);
res.set("Content-Disposition", "attachment; filename='archivo.png'");
fileData.pipe(res)
});
}
反应组分:
const DownloadFile = () => {
axios.get(process.env.REACT_APP_API_URL + 'google/download/' + "1YtDWD9hNEgCUi8YGQPjV98sULhyM5m8C",
{responseType: 'blob'})
.then((res) => {
console.log(res);
// res.blob()
fileDownload(res.data, 'filename.png');
// download(res.data, "file.pdf", res.headers['content-type']);
}).catch((error) =>{
console.error(error);
message.error('upload failed.');
});
}
下一步是发送文件ID、文件名和扩展名,并在收到时使用该名称/扩展名正确保存文件:D