Ionic 显示百分比下载与cordova文件传输

lc8prwob  于 2023-03-06  发布在  Ionic
关注(0)|答案(3)|浏览(145)

我能够下载文件到下面的脚本设备。我想知道的是能够显示在视图中下载的百分比。

downloadImage() {

    this.platform.ready().then(() => {

      const fileTransfer: FileTransferObject = this.Transfer.create();

      const audiolocation = `http://myweb.com/files`+this.audio_download;

      fileTransfer.download(audiolocation, this.storageDirectory+'downloads').then((entry) => {
        const alertSuccess = this.alertCtrl.create({
          title: `Download Succeeded!`,
          subTitle: `Audio was successfully downloaded to: ${entry.toURL()}`,
          buttons: ['Ok']
        });

        alertSuccess.present();

      }, (error) => {

        const alertFailure = this.alertCtrl.create({
          title: `Download Failed!`,
          subTitle: `was not successfully downloaded. Error code: ${error.code}`,
          buttons: ['Ok']
        });

        alertFailure.present();

      });

    });

  }
yeotifhr

yeotifhr1#

文件传输具有onProgress方法。请参考此link

var fileTransfer= new FileTransfer();

fileTransfer.onprogress = function(progressEvent) {
    var percent =  progressEvent.loaded / progressEvent.total * 100;
    percent = Math.round(percent);
    console.log(percent);
};

//fileTransfer.download(...); // or fileTransfer.upload(...);

希望这个有用。

jum4pzuy

jum4pzuy2#

更像是这样:

fileTransfer.onProgress((progressEvent) => {
    var percent =  progressEvent.loaded / progressEvent.total * 100;
    this.percentage = Math.round(percent);
    console.log(this.percentage);
});
elcex8rz

elcex8rz3#

.ts文件:

const fileTransfer: FileTransferObject = this.transfer.create();

  fileTransfer.onProgress((progressEvent: ProgressEvent): void => {
    this.uploadStatus = Math.floor(progressEvent.loaded / progressEvent.total * 
    100);
    console.log("Upload Progress () => ", this.uploadStatus);
    console.log("progressEvent.loaded ", progressEvent.loaded);
    console.log("progressEvent.total ", progressEvent.total);
  });

.html文件:

<ion-row>
  <ion-label class="upload-video-label"> Progress... {{uploadStatus}}%
  </ion-label>
</ion-row>

相关问题