Question

我对 React 组件非常陌生，我尝试从我的 google 驱动器文件夹下载文件，经过很长时间，目前我正在使用我的 API 来上传和获取文件。我的问题是，我应该如何通过数据在我的前端下载文件？

如何从我的谷歌驱动器中获取文件，并在 react 组件上下载？

提前致谢，抱歉我的解释，我不知道我目前对文件做了什么。

注意：此代码仅作为下载图片的示例，我想传递一个fileID来下载任何东西，pdfs，docs，png等。

更新：在尝试不同的解决方案后，我的 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 Component 上，我阅读了很多帖子但我没有找到解决方案，我目前正在使用 downloadjs 尝试 this solution，但没有成功。

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、docs、xlsx 等文件时，无法正常工作，我该怎么办？使用 Api.rest 我测试了我的 api 函数并且它正在工作，我可以从 api.rest 下载我的文件，但我的反应函数显然格式错误，我猜。

Answer 1

好吧，经过长时间的检查代码，我发现我在 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。

表达 + 反应 | Googleapis - 下载文件

1 个答案: