【技巧】ionic后FileTransfer时代的文件传输

FileTransfer是常用的Codrodva插件之一,在过去的几篇文章中都能看到它的身影:

Cordova插件使用——Office文档在线预览那些事 【技巧】ionic3视频上传 【技巧】Ionic3多文件上传

然而,在其Github主页 ,说它其实过期了,而应该用XMLHttpRequest来代替:

Deprecated With the new features introduced in XMLHttpRequest, this plugin is not needed any more. Migrating from this plugin to using the new features of XMLHttpRequest, is explained in this Cordova blog post.

那什么是XMLHttpRequest?它简称XHR,中文可以解释为可扩展超文本传输请求,具体概念自行找度娘。有人可能对它没概念,但是基于它封装的库,如HttpClient、Fetch、ajax等都是较为熟悉的吧? 那我们怎么用这个XHR呢?以一个在线更新apk来做个例子:

1. 把xhr的基本方法都列出来看一下

    const xhr = new XMLHttpRequest();
    const url =  'http://192.168.96.64:8089/temp.apk';
    xhr.open("GET",url);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.responseType = "blob";
    xhr.addEventListener("loadstart", (ev) => {
        // 开始下载事件:下载进度条的显示
    });
    xhr.addEventListener("progress", (ev) => {
        // 下载中事件:计算下载进度
        let progress = "进度:" + Math.round(100.0 * ev.loaded/ev.total) + "%";
        console.log(progress);
    });
    xhr.addEventListener("load", (ev) => {
        // 下载完成事件:处理下载文件
        var blob = xhr.response; 
        console.log(blob);
    });
    xhr.addEventListener("loadend", (ev) => {
      // 结束下载事件:下载进度条的关闭
    });
    xhr.addEventListener("error", (ev) => {
      console.log(ev);
    });
    xhr.addEventListener("abort", (ev) => {
    });
    xhr.send();

只是把可能用到的功能都列出来,但实际应用到的事件就几个,我们运行一下项目可以看到chrome中打印出来的log:

image.png

2. 尝试把Blob数据保存到手机上

借助file插件用于保存文件:

ionic cordova plugin add cordova-plugin-file npm install --save @ionic-native/file

借助file-opener插件用于打开文件:

ionic cordova plugin add cordova-plugin-file-opener2 npm install --save @ionic-native/file-opener

上面两个插件记得在页面导入并在构造函数注入:

import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';
……
constructor(private file: File, private fileOpener: FileOpener) {
}

然后修改上述xhr中load事件的代码:

    xhr.addEventListener("load", (ev) => {
        // 下载完成事件:处理下载文件
        const blob = xhr.response; 
        const fileName = 'temp.apk';
        console.log(blob);
        if(blob){
          let path = this.file.externalDataDirectory;
          this.file.writeFile(path, fileName, blob, {
            replace: true
          }).then(()=>{
            // window.cordova.plugins.FileOpener.openFile(path + 'temp.apk', ()=>alert('success'), (err)=>console.log(err));
            this.fileOpener.open(
              path + fileName, 
              'application/vnd.android.package-archive'
            );
          }).catch((err=>{
            console.log(err);
          }))
        }
    });

在真机上运行测试看效果:

ionic cordova run android --device

可以发现能正常保存并安装apk,动态图就不发了,自行尝试。

此时可以进一步优化细节,也可以尝试用httpClient来替换实现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏重庆的技术分享区

Vim定制化简介

Vim是几乎所有Unix系统中都会存在的少数文本编辑器之一。虽然最初的学习曲线是不可避免的,但Vim的目标是成为一个高效的文本编辑器,并提供一个根据用户喜好可配...

1312
来自专栏张戈的专栏

原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

双 11 光棍节,我在博客发布了一篇给博客部署一个友好对话框的教程,用了几天感觉非常不错!就进一步折腾了一下,目前这个 js 已实现以下多种功能: 一、功能描述...

48412
来自专栏快乐八哥

Windows8异步编程的注意事项

Windows8 App开发中涉及到下载数据和上传数据。针对小的数据使用的是WinJS.xhr(),而针对大的文件,不方便使用post方式直接上传的文件都使用B...

21010
来自专栏macOS 开发学习

Mac开发之 Cocoa 绑定 入门

从iOS开发转为Mac OSX应用开发的过程中,cocoa 绑定算是比较大的一个差异,也是OSX上比较实用的技术,cocoa 绑定让开发者节省了大量的代码,可以...

1062
来自专栏编程直播室

Ionic 2 :如何实现列表滑动删除按钮1.创建Ionic2应用2.准备列表数据3.修改主页(HOME)的模版4.创建方法删除数据5.添加一个编辑按钮总结

21110
来自专栏web开发

HTML5中的Web Notification桌面通知

大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在...

4356
来自专栏数据结构笔记

python爬虫系列之 xpath实战:批量下载壁纸

我们要爬取的目标网站是:http://www.netbian.com/,这个网站长这样:

3674
来自专栏腾讯移动品质中心TMQ的专栏

基于自定义向导的C++单元测试环境自动化配置

导语:相信使用过Visual Studio的小伙伴都感受过VS向导的强大,通过应用程序向导,我们可以很方便地搭建应用程序,通过代码向导,可以大大提高我们编写代码...

20510
来自专栏有趣的Python和你

人生若只如初见,何必找包爬数据SeleniumPhantomJS豆瓣登陆

1264
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增、编辑...

2805

扫码关注云+社区

领取腾讯云代金券