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

Question

我是 React 组件的新手，我尝试从我的 google 驱动器文件夹下载文件，在很长一段时间后，目前我正在使用我的 API 上传和获取文件。我的问题是，我应该如何传递数据以在我的前端下载文件？

如何从我的 google 驱动器获取文件，并在 React 组件上下载？

提前致谢，抱歉我的解释，我不知道我目前在用这个文件做什么。

注意：此代码只是下载图片的示例，我想传递一个文件 ID 来下载任何内容，pdf、文档、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 尝试，但没有成功。

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:

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、文件名，当您收到时使用 name/extension 正确保存文件 :D.

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

Express + React | Googleapis - download a file

frontend

backend

drive

express

reactjs