ionic

ionic3 操作本地文件

2018-05-28  本文已影响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'
      }
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读