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

前端之家收集整理的这篇文章主要介绍了Angular4.x+Ionic3 踩坑之路之 Ionic3.x 拍照与图片上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Ionic 原生插件官方文档 https://ionicframework.com/do...

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.CAMERA

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

上传功能的封装

多参数可在官方文档查阅

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

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

错误解决办法。

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

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

解决办法:重新多试几次

愿你成为终身学习都

猜你在找的Angularjs相关文章