美文网首页
ionic1 调用文件管理器上传/打开文件

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

作者: my木子 | 来源:发表于2019-01-25 15:10 被阅读0次

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%",
              });
            }
          })
        });
    };

相关文章

网友评论

      本文标题:ionic1 调用文件管理器上传/打开文件

      本文链接:https://www.haomeiwen.com/subject/vmvmjqtx.html