Angular4.x+Ionic3 踩坑之路之 Ionic3.x 拍照与图片上传

1.Ionic调用cordor插件 Camera 与cordova-plubin-file-transfer实现拍照及图片上传

Ionic 原生插件官方文档

1）camera插件安装

   ionic cordova plugin add cordova-plugin-camera
   npm install --save @ionic-native/camera
复制代码

2）File Transfer插件安装

  ionic cordova plugin add cordova-plugin-file-transfer
  npm install --save @ionic-native/file-transfer
复制代码

这种安装方法，在导入的时候可能会提示没有该模块的报错,可以换以下方法安装：

 ionic cordova plugin add cordova-plugin-file
  npm install --save @ionic-native/file
  
  ionic cordova plugin add cordova-plugin-file-transfer
  npm install --save @ionic-native/file-transfer
复制代码

3. app.module.ts引入依赖注入

3.在需要上传的文件中引入实例化

在构造函数中实例化

4）拍照或从图库中获取图片上传功能

这边主要封装了一个获取图片的方法，参数sourceType表示要从哪里获取图片

• 从图库中获取图片 this.camera.PictureSourceType.PHOTOLIBRARY

• 从图库中获取图片 this.camera.PictureSourceType.PHOTOLIBRARY

通过this.camera.getPicture()获取图片，成功返回图片路径。

上传功能的封装

更多参数可在官方文档查阅

安装插件可能遇到的错误以及解决方案

1）安装 cordova-plugin-file-transfer 以及其他插件都报错提示信息和 node_modules 模块相

关错误解决办法。

删除 node_modules , cd 到项目目录 , 重新用 npm install 安装所有的模块
复制代码

2. 安装其他的模块没有问题，安装 cordova-plugin-file-transfer 出现如下错误。

解决办法：重新多试几次

愿你成为终身学习都