ionic3图片选择、拍照、文件上传、文件下载

一、图片选择

ionic有自带的图像选择器，但是样式不好看，测试过界面像第一代智能机的图像选择页面。

这里介绍一个github上面开源并且一直在维护的图片选择

开源地址：https://github.com/giantss/cordova-plugin-ImagePicker

先附上效果图：

有没有感觉像微信里面的图片选择

安装插件：

• cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git

在需要用到图片选择的页面添加如下代码：

declare let ImagePicker:any

然后写一个方法

  //图片选择
  image1;
  choosePicture(){
    ImagePicker.getPictures((result)=> {
        this.image1=result.images[0].path;//文件路径
        this.el.nativeElement.querySelector('#Img2').style.display = 'block';//这是我页面显示的逻辑代码不用管（做参考），报错直接删掉
    }, function(err) {
        console.log(err);
    }, {
      maximumImagesCount : 1,
        //配置参数	参数含义
        //maximumImagesCount	多选限制数量，默认为9
        //width	设置图片的width，默认为1920
        //height	设置图片的height，默认为1440
        //quality	图片质量 默认80
    });
  }

这样就可以了

NO

这里我踩过一个坑，没仔细看文档

如果build不了请运行：

cordova plugin add cordova-android-support-gradle-release

默认情况下，此插件将使用最新版本的支持库

如果要指定非默认版本：{required version} 值为类似 25.+，26.+，27.+ 这种。

这样就可以了

二、拍照

ionic有自带的打开相机的插件

地址：https://ionicframework.com/docs/native/camera/

简单的运行一下官网上的两行命令

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

app.module.ts

import { Camera } from '@ionic-native/camera';


providers: [
    Camera
 ]

需要使用相机的ts文件注入此插件，然后写个方法，官网上复制粘贴

import { Camera,CameraOptions } from '@ionic-native/camera';

constructor(private camera: Camera) { }

  //相机
  getPhoto(){
    const options: CameraOptions = {
      allowEdit:true,
      quality:100,
      destinationType:this.camera.DestinationType.FILE_URI,
      encodingType:this.camera.EncodingType.JPEG,
      mediaType:this.camera.MediaType.PICTURE,
      saveToPhotoAlbum:true,
    }
    this.camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      alert(base64Image);
    }, (err) => {
      //我的手机MIUI10开发版系统用这个插件获取不到拍照后的图片，暂时不知道什么原因
      alert("版本不兼容，请从相册选取");
    });
  }

这里强调一件事，ionic里面声明变量一点要用let，不要用var声明，踩过坑的

这样拍照功能就完成了

三、文件上传、下载

官网文件传输地址：https://ionicframework.com/docs/native/file-transfer/

第一步：安装插件

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

第二步：app.module.ts

import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';//此插件实现了一个File API，允许对驻留在设备上的文件进行读/写访问。



providers: [
    File,
    FileTransfer
  ]

第三步：在需要上传文件的ts到官网复制粘贴

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

constructor(private transfer: FileTransfer, private file: File) { }

写一个文件上传的方法

//文件上传
upload() {
  const fileTransfer: FileTransferObject = this.transfer.create();
  let options: FileUploadOptions = {
     fileKey: 'file',
     fileName: 'name.jpg',
     headers: {}
  }
  fileTransfer.upload(this.image1, 'url', options)
   .then((data) => {
     // success
   }, (err) => {
     // error
   })
}

完成

接着就是文件下载

  //文件下载
  download() {
    const fileTransfer: FileTransferObject = this.transfer.create();
    const url ="http://www.example.com/file.pdf";
    fileTransfer.download(url, this.file.dataDirectory + 'file.jpg').then((entry) => {
      this.image1=entry.toURL();
    }, (error) => {
      alert("download失败")
    });
  }

end