ionic1 调用文件管理器上传/打开文件

1. 相关插件

文件管理器
cordova plugin add cordova-plugin-filechooser
路径转换
cordova plugin add cordova-plugin-filepath
文件读写
cordova plugin add cordova-plugin-file
上传文件
cordova plugin add cordova-plugin-file-transfer
打开文件
cordova plugin add https://github.com/JuanjoPP/cordova-plugin-file-opener2
gradle版本跟crosswalk产生冲突,安装兼容插件
cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION=24.+

2. 返回文件路径的两种形式

// 安卓 7.0以上文件路径以 'content' 开头,7.0 下以 'file' 开头
// 转换前的路径
content://media/external/file/306905

// 转换后的路径
file:///storage/emulated/0/测试文件.docx

3. 代码部分

server.js
  // 转换文件路径
  .service('resolveFileService', function (openFileService, $rootScope) {

    // 打开文件
    function openFile(path) {
      var fileType = path.substring(path.lastIndexOf(".") + 1, path.length); // 文件名后缀
      openFileService.openFile(path, fileType);
    };

    // 文件路径转换,统一成file开头的文件路径
    function resolveUrl(newUrl, type) {
      window.FilePath.resolveNativePath(newUrl, function (path) {
        if (type === 'open') {
          openFile(path);
        } else if (type === 'upload') {
          return path;
        }
      }, function (err) {
        console.log(err);
      });
    };

    /**
     * 打开文件管理器,选择上传文件
     * type 区分类型  'open' 打开文件,'upload' 上传文件
     * url 选择文件后返回的路径
     */
    this.fileChooser = function (type) {
      return fileChooser.open(function (url) {
        var path = decodeURI(url);
        var isExist = path.indexOf('content'); // 安卓 7.0以上文件路径以 'content' 开头,7.0 下以 'file' 开头
        if (isExist != -1) {
          resolveUrl(path, type);
        } else {
          if (type === 'open') {
            openFile(path);
          } else if (type === 'upload') {
            $rootScope.uploadSendEmail(path);   // 上传文件
          }
        }
      }, function (err) {
        console.log(err);
      });
    }

    

  })

  // 打开文件
  .service('openFileService', function ($cordovaFileOpener2) {

    function getFileMimeType(fileType) {
      var mimeType = '';
      switch (fileType) {
        case 'txt':
          mimeType = 'text/plain';
          break;
        case 'docx':
          mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
          break;
        case 'doc':
          mimeType = 'application/msword';
          break;
        case 'pptx':
          mimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
          break;
        case 'ppt':
          mimeType = 'application/vnd.ms-powerpoint';
          break;
        case 'xlsx':
          mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          break;
        case 'xls':
          mimeType = 'application/vnd.ms-excel';
          break;
        case 'zip':
          mimeType = 'application/x-zip-compressed';
          break;
        case 'rar':
          mimeType = 'application/octet-stream';
          break;
        case 'pdf':
          mimeType = 'application/pdf';
          break;
        case 'apk':
          mimeType = 'application/vnd.android.package-archive';
          break;
        case 'jpg':
          mimeType = 'image/jpeg';
          break;
        case 'png':
          mimeType = 'image/png';
          break;
        default:
          mimeType = 'application/' + fileType;
          break;
      }
      return mimeType;
    }

    // 打开文件
    this.openFile = function (path, type) {
      $cordovaFileOpener2.open(path, getFileMimeType(type)).then(function (res) {
        // 成功
        console.log(res);

      }, function (err) {
        console.log(err);
        // 错误
      });
    }

  })

controller.js

    // 上传文件
    $scope.postUploadFile = function () {
      resolveFileService.fileChooser('upload');   // 'open' 打开文件,'upload' 上传文件
    };

    //图片上传
    $rootScope.uploadSendEmail = function (path) {
      console.log(path);
      var filename = path.split("/0/").pop();
      var mimeType = path.split(".").pop();
      var targetPath = cordova.file.externalRootDirectory + filename; //APP下载存放的路径,可以使用cordova file插件进行相关配置
      var url = encodeURI(intraHost + "/OA/postUploadFile");
      var trustHosts = true;
      var options = {
        // fileKey: 'file',
        mimeType: mimeType,
        fileName: filename,
      };
      $ionicLoading.show({
        template: "正在上传..."
      });
      $cordovaFileTransfer.upload(url, targetPath, options, trustHosts)
        .then(function (result) {
          console.log(result);
          $ionicLoading.hide();
          $cordovaToast.showShortBottom('上传成功');

        }, function (err) {
          console.log(err);
          $ionicLoading.hide();
          $cordovaToast.showShortBottom('上传失败');
        }, function (progress) {
          $timeout(function () {
            var downloadProgress = (progress.loaded / progress.total) * 100;
            $ionicLoading.show({
              template: "已上传:" + Math.floor(downloadProgress) + "%",
            });
            if (downloadProgress > 99) {
              $ionicLoading.show({
                template: "已上传:100%",
              });
            }
          })
        });
    };
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容

  • 四、MES服务端部分 4.1 开发环境 jdk1.8+SpringBoot 2.1.1 + MyBatis3.4....
    戎码一生12138阅读 322评论 0 0
  • 《改变—问题形成和解决的原则》 第3编 问题的解决 ● 第9章 改变的实践 无创造力的心灵能指认出错的答案,但要...
    晾晾妈妈310阅读 515评论 0 0
  • 盼一缕凉风 掠过七月的结尾 在田里挥汗如雨 抬头时神清气爽 念一片落叶 划过窗角的瞬间 画纸上的少年 低头把微笑拈...
    栖梧小凤阅读 117评论 0 0
  • 一直都有一个念想,希望在老了的时候能抱着一大框的信件在某个慵懒的午后小心翼翼地将其拆开,瞥着老花眼逐句逐句地回味曾...
    一周陪你读一本书阅读 1,197评论 7 12
  • 苍蝇蚊子不要管,定力不够,会起憎恨心, 放下障碍我们的,名利之心,执着名利,在人面前刻意表现自己,爱面子,怕别人说...
    阿新_9483阅读 90评论 0 0