【Cordova】cordova下载-cordova-plugin -file-transfer-vue案例

原创已于 2024-08-20 15:55:35 修改 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cordova #下载 #vue #mint-ui

于 2018-10-16 16:11:42 首次发布

Cordova 专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了如何在Cordova项目中使用`cordova-plugin-file-transfer`进行文件下载，并结合Vue及Mint-UI实现了下载进度条功能。详细步骤包括插件的安装和相关代码展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

cordova plugin add cordova-plugin-file-transfer

文档地址：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

代码

项目中使用的ui框架是mint-ui，功能包括：下载文件，进度条

HTML：

    <mt-button @click="createFilePath" class="phone"><img src="@/assets/images/app-center/icon-phone.png" slot="icon">下载到手机</mt-button>
    <!-- 展示进度条 -->
    <mt-popup class="isProgress" v-model="isProgress" position="center" :closeOnClickModal="false">
      <div class="m-progress">
        <div class="tip">正在下载中({{progress}}%)...</div>
        <mt-progress class="mt-progress" :value="progress" :bar-height="10">
        </mt-progress>
      </div>
      <button class="cancel" @click="cancelDownload">取消</button>
    </mt-popup>

JS:

  mounted() {
    this.initialize();
  },
    data() {
    return {
      // 设备准备
      ready: false,
      // 进度条
      progress: null,
      // 显示进度条
      isProgress: false,
      //下载对象
      fileTransfer: null,
      // 下载地址
      downloadUrl: null,
      //预览数据
      previewData: {
		title:'1_michael_ouyang',
		extension:'jpg',
		file_url:'https://avatar.youkuaiyun.com/7/E/0/1_michael_ouyang.jpg'
	},
},
 methods: {
    initialize() {
      document.addEventListener(
        'deviceready',
        this.onDeviceReady.bind(this),
        false
      );
    },
    // deviceready Event Handler
    onDeviceReady() {
      this.ready = true;
    },

    // 创建文件路径
    createFilePath() {
      let _this = this;
      if (_this.ready) {
        window.requestFileSystem(
          LocalFileSystem.PERSISTENT,
          0,
          function(fs) {
            fs.root.getFile(
              _this.previewData.title + '.' + _this.previewData.extension,//下载文件名称 例：1_michael_ouyang.jpg
              { create: true, exclusive: false },
              function(fileEntry) {
                //调用fileTransfer插件，下载图片
                _this.isProgress = true;
                _this.downLoadFile(fileEntry.nativeURL);
              },
              function(err) {
                console.log('err', err);
                _this.toast('下载失败，请稍后重试');
              }
            );
          },
          function(error) {
            console.log('error', error);
            _this.toast('下载失败，请稍后重试');
          }
        );
      } else {
        _this.toast('下载失败，请稍后重试');
      }
    },
    // fileTransfer plugin
    downLoadFile(fileURL) {
      let _this = this;
      _this.progress = 0;
      // 初始化FileTransfer对象
      _this.fileTransfer = new FileTransfer();
      // 服务器下载地址
      let uri = encodeURI(_this.previewData.file_url);
      //监听下载进度
      _this.fileTransfer.onprogress = function(e) {
        if (e.lengthComputable) {
          const progress = e.loaded / e.total;
          _this.progress = (progress * 100).toFixed(2);
        }
      };
      // 调用download方法
      _this.fileTransfer.download(
        uri, //uri网络下载路径
        fileURL, //url本地存储路径
        function(entry) {
          // 手机存储地址
          _this.downloadUrl = decodeURIComponent(entry.toURL());
          if (_this.progress > 1 || _this.progress === 1) {
            _this.isProgress = false;
            // MessageBox('提示', '下载已完成，文件存储在: ' + _this.downloadUrl);
            MessageBox('下载已完成', '文件存储在手机根目录 ');
            _this.addDownRecord();
          }
        },
        function(error) {
          console.log('download error source ' + error.source);
          console.log('download error target ' + error.target);
          console.log('upload error code' + error.code);
        }
      );
    },
    /**
     * desc:取消下载
     */
    cancelDownload() {
      MessageBox.confirm('确定取消吗?').then(action => {
        if (this.isProgress) {
          this.isProgress = false;
          this.fileTransfer.abort();
          this.fileTransfer = null;
          this.progress = 0;
        }
      });
    }
  }

CSS:

/* 下载进度 */
.isProgress {
  width: 85%;
  height: 2.86rem;
  border-radius: 0.2rem;
  .m-progress {
    padding: 0.5rem 0.5rem 0;
    height: 55%;
    .tip {
      font-size: 0.28rem;
      margin-bottom: 0.25rem;
    }
  }
  .cancel {
    width: 100%;
    line-height: 3.5;
    text-align: center;
    border-radius: 0.2rem;
    border-top: 0.01rem solid #f0f0f0;
  }
}