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

心已赠人 2022-05-09 14:14 337阅读 0赞

## 安装 ##

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:'http://avatar.csdn.net/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;
      }
    }