美文网首页ionic
ionic3 操作本地文件

ionic3 操作本地文件

作者: 南京确善能 | 来源:发表于2018-05-28 17:15 被阅读0次

下载插件 依赖

//选择文件
ionic cordova plugin add cordova-plugin-filechooser
npm install --save @ionic-native/file-chooser
//解析文件
ionic cordova plugin add cordova-plugin-filepath
npm install --save @ionic-native/file-path
//打开本地文件
ionic cordova plugin add cordova-plugin-file-opener2
npm install --save @ionic-native/file-opener
//读写文件
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file
import { FileChooser } from '@ionic-native/file-chooser';
import { FilePath } from '@ionic-native/file-path';
import { FileOpener } from '@ionic-native/file-opener';
import { File } from '@ionic-native/file';

FileTransferProvider

/**
 * native操作文件
 */
@Injectable()
export class FileTransferProvider {
  constructor(public http: HttpClient,private transfer: FileTransferObject,private appCfg: AppConfig,private fileChooser: FileChooser,
    private filePath: FilePath,public modalCtrl: ModalController,private fileOpener: FileOpener,private file: File) {
      //判断文件夹是否存在 不存在创建 这里必须是外部文件 巨坑无比
      this.file.checkDir(this.file.externalDataDirectory,"").then(_ => console.log('Directory exists')).catch(err => {
        this.file.createDir(this.file.externalDataDirectory,"",true).then(result=>{
           console.log("success")
        }).catch(err=>{
          console.log("err:"+JSON.stringify(err))
        })
      });
  }

   /**
    * 上传文件
    * @param imgPath 文件路径
    * @param serverUrl 接口地址 
    */
  upload(imgPath,serverUrl):Promise<any>{
    let options: FileUploadOptions = {
       fileKey: 'pic',//表单name
       fileName: imgPath.substring(imgPath.lastIndexOf("/")+1,imgPath.length),
       httpMethod:'post',
       params:{}
    }
    return new Promise((resolve, reject) => {
      this.transfer.upload(imgPath, serverUrl, options)
      .then((data) => {
        resolve(JSON.parse(data['response']));
      }, (err) => {
        reject(err)
      })
    });
   
  }

  /**
   * 下载文件
   * @param path 
   * @param fileName 
   */
  download(path:string,fileName:string) {
    this.transfer.download(path, this.file.externalDataDirectory + fileName,true).then((entry) => {
      this.openFile(decodeURI(entry.toURL()))
    }, (error) => {
      console.log("error:"+JSON.stringify(error))
    });
  }


  /**
   * 调起文件选择器选择文件
   */
  chooseFile():Promise<any>{
    return new Promise((resolve, reject) => {
      this.fileChooser.open().then(uri =>{
        this.resolveUri(uri).then(path=>{
          resolve(path);
        })
      }).catch(e =>{
        reject(e);
      })
    })
  }

  /**
   * 解析uri
   * @param uri 
   */
  resolveUri(uri:string):Promise<any>{
    return new Promise((resolve, reject) => {
      this.filePath.resolveNativePath(uri).then(filePath =>{
        resolve(filePath);
      }).catch(err =>{
        reject(err);
      });
    })
  
  }

  /**
   * (单图)多图预览model组件封装
   * @param photoData 输入图片地址
   * @param {string} key 对象图片url对应的属性名程
   */
  photoViews(photoData,key = ''){
      let photos:Array<object> = [];
      let obj = {};
      if(photoData && typeof(photoData) == "string"){
          obj['url'] = photoData;
          photos.push(obj);
      }

      // 多张图片时(photoData为图片地址字符串数组)
      if(photoData instanceof Array){
          photoData.forEach(function(item,index,array){
              if(key == '' && item){
                  obj['url'] = item;
                  photos.push(obj);
              }
              if(key != '' && item[key]){
                  obj['url'] = item[key];
                  photos.push(obj);
              }
          });
      }
      let modal = this.modalCtrl.create(GalleryModal, {
          photos: photos,
          initialSlide: 0
      });
      modal.present();
  }
  
  /**
   * 打开文件
   * @param path 
   */
  openFile(path:string){
    this.fileOpener.open(path, this.getFileMimeType(path.substring(path.lastIndexOf(".")+1,path.length)))
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', JSON.stringify(e)));
  }

  /**
   * 获取文件类型
   * @param fileType 
   */
  getFileMimeType(fileType: string): string {
    let mimeType: string = '';
  
    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 'jpg':
        mimeType = 'image/jpeg';
        break;
      case 'png':
        mimeType = 'image/png';
        break;
      default:
        mimeType = 'application/' + fileType;
        break;
    }
    return mimeType;
  }
}

config.xml

 <preference name="AndroidPersistentFileLocation" value="Internal" />  
 <preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root" />  
 <preference name="AndroidPersistentFileLocation" value="Compatibility" />  

遇到报错信息

Manifest merger failed : Attribute meta-data#android.support.VERSION@value value=(25.4.0) from [com.android.support:appcompat-v7:25.4.0] AndroidManifest.xml:28:13-35
        is also present at [com.android.support:support-v4:26.1.0] AndroidManifest.xml:28:13-35 value=(26.1.0).
        Suggestion: add 'tools:replace="android:value"' to <meta-data> element at AndroidManifest.xml:26:9-28:38 to override.

解决的办法

//app/build.gradle  上面提示什么版本写什么版本
configurations.all {
  resolutionStrategy.eachDependency { DependencyResolveDetails details ->
    def requested = details.requested
    if (requested.group == 'com.android.support') {
      if (!requested.name.startsWith("multidex")) {
        details.useVersion '26.1.0'
      }
    }
  }
}

相关文章

  • ionic3 操作本地文件

    下载插件 依赖 FileTransferProvider config.xml 遇到报错信息 解决的办法

  • [Git]非常常用的Git开发命令

    分支操作: 本地已有dev分支 分支操作 如何贡献代码到开源库 本地代码提交到git仓库 移除对某个文件(文件夹)...

  • ionic5+Angular8 状态栏通知+震动+自定义音频

    ionic3 即时通讯(待机/后台运行可用)github官方文档ionic官方文档blog实例 ionic3本地通...

  • Java 本地文件操作

    File类简介 File 类用来代表文件或文件夹,通过 File 类,可以对文件与文件夹进行丰富的操作,并且可以获...

  • java本地文件操作

    date: 2017-05-25 13:29:48 学而不思则罔,思而不学则殆。 java本地文件操作 一、Fil...

  • iOS本地文件操作

    文件操作在我们开发过程中或多或少都会遇到,我一般不会去记这些,每次使用的时候都要去查询下,有点麻烦,今天索性记录下...

  • Git常用命令

    Git流程本地文件 -> 暂存区 -> 本地版本库 -> 远程版本库 本地操作 跟github交互

  • HQL操作之数据操作

    HQL操作之数据操作 数据导入 LOCAL :load data local :从本地加载数据,本地文件会拷贝到H...

  • Git基础

    Git使用初尝试 1.新建项目来操作在github上新建一个项目,然后拉到本地,在本地对文件进行操作,然后将文件p...

  • Git常用操作

    Git常用操作 基础: ​ 进阶: 1.1 本地库初始化 本操作会生成 .git 目录,存放的是本地库相关文件。 ...

网友评论

    本文标题:ionic3 操作本地文件

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