Загрузка файла с помощьюactjs работает неправильно (используется axios) - PullRequest
Новая
       14

Загрузка файла с помощьюactjs работает неправильно (используется axios)

1 голос
/ 25 мая 2019

Я внедряю загрузчик видео с YouTube, используя ytdl-core с бэкэндом Nodejs и внешним интерфейсом Reactjs.Тем не менее, используя библиотеку ytdl-core, я могу отправить на YouTube видеофайл для веб-интерфейса с этим кодовым блоком 

app.get('/download', (req, res) => {
    let { url, itag } = req.query;
    let id = ytdl.getURLVideoID(url);

    ytdl.getInfo(id, (err, info) => {
        if (err) {
            console.log(err);
            throw err;
        }
        else{
            let audioandvideo = ytdl.filterFormats(info.formats, 'audioandvideo');       
            let video = audioandvideo.filter(obj => obj.itag === itag);

            video = video[0]

            res.header('Content-Disposition', `attachment; filename="${info.title}.${video.container}"`);
            res.header('Content-Type', 'video/webm');

            ytdl(url, {
                format: video
            }).pipe(res); 
        }             
    })
});

Однако файл загружается правильно, если я перенаправлю веб-страницу на маршрут, подобный этому 

window.location.href = `http://localhost:5000/download?url=${this.state.url}&itag=${itag}`;

Это отлично работает, и видео загружается правильно.Но так как это перенаправление, я не могу сделать это на размещенном сайте.Итак, мне нужно использовать Axios, чтобы сделать это.

Я провел некоторое исследование и нашел некоторые решения.Я пытался с js-file-download библиотекой после принятого ответа здесь .Он загружает файл в каталог клиента, но файл не воспроизводится.Это кодовый блок, который я использовал для этого 

  downloadVideo(itag){

    axios.get(`http://localhost:5000/download`, {
      params: { url: this.state.url, itag },
    })
    .then(response => {
      fileDownload(response.data, `video.mp4`);
    })
    .catch(err => console.log(err));
  }

Поскольку он не работает, я попробовал другой подход, упомянутый в ранее упомянутом ответе StackOverflow.Он также загружает файл, но не работает.

Как я могу это исправить?В чем может быть причина того, что мой запрос axios не работает правильно?

РЕДАКТИРОВАТЬ : 

downloadVideo(itag){
    axios.get(`http://localhost:5000/download`, {
      params: { url: this.state.url, itag },
      responseType: Blob
    })
    .then(response => {
      fileDownload(response.data, `video.mp4`);
    })
    .catch(err => console.log(err));

    // window.location.href = `http://localhost:5000/download?url=${this.state.url}&itag=${itag}`;
  }

Это код внешнего интерфейса.Если я использую закомментированный блок кода (window.location.href) вместо axios.get, файл загружается и работает.Но если я использую axios.get, файл загружается, но кажется, что он поврежден, так как он не воспроизводится.

...