Экспресс + Реагировать | Googleapis — скачать файл

Я новичок в компонентах React, и я пытаюсь загрузить файлы из своей папки на Google Диске, после долгого времени, в течение которого я работаю со своим API для загрузки и получения файлов. Мой вопрос: как мне передать данные для загрузки файла на моем интерфейсе?

Как я могу получить файлы с моего диска Google и загрузить на реагирующий компонент?

Заранее спасибо, и извините за мое объяснение, я не знаю, что я сейчас делаю с файлом.

Примечание. Этот код приведен в качестве примера для загрузки изображения. Я хочу передать идентификатор файла для загрузки чего угодно, pdf, 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, я прочитал много сообщений, но не нашел решения, в настоящее время я использую 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, но мои функции реагирования, по-видимому, плохо отформатированы, я думаю.

Api.rest может скачивать файлы


reactjs frontend backend express drive
person Maximiliano Fonseca    schedule 22.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, после долгой проверки кода я нашел свою ошибку в функции 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.');
        });
    }

Следующим шагом является отправка идентификатора файла, имени файла с расширением, и когда вы получите это имя/расширение, используйте это имя/расширение для правильного сохранения файла: D.

person Maximiliano Fonseca    schedule 22.05.2021