【问题标题】:Download files with angular2 - ionic 2使用 angular2 - ionic 2 下载文件
【发布时间】:2017-07-27 20:34:50
【问题描述】:

我有一个 Ionic 2 应用程序,我需要从 soundcloud 下载音频。我已经有了执行请求所需的 url:

let url = `https://api.soundcloud.com/tracks/${audio.id}/download?client_id=${this.SC_CLIENT_ID}`

我想知道如何做到这一点。我尝试了 FileTransfer:

public download(audio: any): void {

        this.platform.ready().then(() => {
            console.log("Clickeo para descargar: " + audio.id);

            let url = `https://api.soundcloud.com/tracks/${audio.id}/download?client_id=${this.SC_CLIENT_ID}`;

            let pathToSaveTo: string = '';

            if (this.platform.is('android')) {
                pathToSaveTo = cordova.file.externalApplicationStorageDirectory + audio.id + '.wav';

                let fileTransfer = new Transfer();

                fileTransfer.onProgress(this.onProgress);

                fileTransfer.download(url, pathToSaveTo)
                    .then((entry) => {
                        console.log('download complete: ' + entry.toURL());
                    }, (error) => {

                        let prompt = this.alertCtrl.create({
                            title: 'Error',
                            subTitle: error,
                            buttons: ['Accept']
                        });

                        prompt.present();
                    });
            }
        });

    }

    onProgress = (progressEvent: ProgressEvent) : void => {
        this.ngZone.run(() => {
            if (progressEvent.lengthComputable) {
                let progress: any = Math.round((progressEvent.loaded / progressEvent.total) * 100);
                console.log(progress);
                let toast = this.toastCtrl.create({
                  message: progress,
                  duration: 100
                });
                toast.present();
            }
        });
    }

但它总是下载一个零 KB 的文件。有什么解决办法吗?也许是 angular2 方式,还是我做错了? 如果我将此 url 放入浏览器中,并使用正确的音频 id 和 mi 客户端 id,它会开始下载,但不会使用 FileTransfer。

非常感谢。

伊万。

【问题讨论】:

  • 参考这个:stackoverflow.com/questions/39315724/…为我工作
  • 谢谢@MELWINVINCENT,但这不是我的问题。我的问题是 soundcloud 返回了带有重定向的响应。我必须检测重定向状态并手动重定向到response.headers.Location

标签: cordova angular ionic2 file-transfer angular2-http


【解决方案1】:

我的问题是 soundcloud 返回了带有重定向的响应。我不得不检测重定向状态并手动重定向到response.headers.Location

这是工作代码:

public download(localAudio: LocalAudio): void {
    let fileName: string = localAudio.id + '.mp3';

    var audio: StorageAudio = {
        localAudio: localAudio,
        url: `https://api.soundcloud.com/tracks/${localAudio.id}/download?client_id=${this.SC_CLIENT_ID}`,
        fileName: fileName,
        filePath: this.file.dataDirectory + fileName
    };

    if (this.platform.is('ios')) {
        audio.filePath = audio.filePath.replace(/^file:\/\//, '');
    }

    this.toastNotifications.showStartingDownloadMsg();

    this.http.downloadFile(audio.url, {}, {}, audio.filePath).then(response => {
        this.toastNotifications.showDownloadCompleteMsg();

        this.storeAudioInformation(audio);
    }).catch(response => {
        /**
         * Handle redirects if exist.
         */
        if (this.hasRedirection(response)) {
            console.log("Redirect to " + response.headers.Location);
            audio.url = response.headers.Location;

            this.redirectToDownload(audio);
        } else {
            this.toastNotifications.showDownloadErrorMsg();
        }
    });
}

public hasRedirection(response: any): boolean {
    return (response.headers.Location && (response.status === 301 || response.status === 302));
}

public redirectToDownload(audio: StorageAudio): void {
    this.http.downloadFile(audio.url, {}, {}, audio.filePath).then(response => {
        this.toastNotifications.showDownloadCompleteMsg();

        this.storeAudioInformation(audio);
    }).catch(response => {
        console.log("Error catch: " + JSON.stringify(response));
    });
}

【讨论】:

  • 我也尝试在 Ionic 应用程序中使用 soundcloud url 下载。当我尝试使用您的解决方案时,我得到了 response.headers.Location=undefined ,因此我无法下载。你对此有什么想法吗?
猜你喜欢
  • 2017-09-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-16
  • 1970-01-01
  • 2018-11-18
相关资源
最近更新 更多