Ionic3/4中如何上传图片（拍照/图片选择）

[Talk is cheap. Show me the code]

不想看理论知识请直接移步最后代码示例。

(本文仍是建议看下总体思路)

最初我写APP的时候使用 了Ionic3，今天去看了下文档，Ionic4相对于3的文档说明更清晰，代码也更加简化，社区变得愈来愈好还真是有点小开心呢。但也有批评说Ionic4相对于3更复杂，坑更多。

手机端图片上传有两种方式一种是 拍照上传 另外一种是 图片选择 （请注意这里与文件选择的区别） 以后上传，废话很少说进入正题。

拍照上传：

1、前置条件

1.一、引入js和本地依赖，这样咱们就可使用camera的一些api

npm install --save @ionic-native/cameranpm install --save @ionic-native/camera
复制代码

1.2添加cordova插件

ionic cordova plugin add cordova-plugin-camera
复制代码

而后在config.xml中会生成，有时须要你本身添加进去

<plugin name="cordova-plugin-camera" spec="^4.0.3" />
复制代码

相对android，ios对于权限的控制要更严格一些，ios10如下须要你在config.xml底部添加以下代码：

<!-- Required for iOS 10: Camera permission prompt -->
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>Used to take pictures</string>
</edit-config>
复制代码

2、实现思路以及逻辑

1.调用摄像头，拍摄图片

2.将

this.camera.getPicture(options).then(()=>{})
复制代码

返回的base64的图片传给后台，请求成功之后，这里须要后台配合咱们返回一个图片的缩略图URL，以方便咱们回显到页面上。 固然Ionic4自己也提供了图片压缩的功能。使用后端返回的图片来回显到页面上只是为了确保图片上传成功。咱们必须考虑到生产环境中的各类网络问题。

3.在图片上传过程当中咱们须要监控camera插件自己的then和catch状态，并及时给用户信息反馈，失败后调用 this.toast（'图片上传失败'）。

3、代码示例

3.一、根模块（app/src/app.module.ts）中注入Camera 。

导入camera模块

import { Camera } from '@ionic-native/camera';
复制代码

providers中注入,固然你还能够看到我为项目注入的其余所须要的服务以及配置。

providers: [
    Camera,     //相机拍照
    imagePicker,//图片选择
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
复制代码

HTML页面

<div id="license" (click)="takePicture()">
      <div class="error-loading" *ngIf="uploadLinFail" >
    	 <img src="assets/img/login/loading.gif" alt="" class="camera">
    	 图片上传中..
      </div>
      <img class="img-scale"  [src]="ImageScale" *ngIf="ImageScale"/>
      <div *ngIf="currentImage">
    	  <img src="assets/img/login/camera.png" alt="" class="camera">
    	  营业执照
      </div>
  </div> 
复制代码

.ts 页面

01.导入

import { Camera, CameraOptions } from '@ionic-native/camera';
复制代码

02.constructor中注入

private camera: Camera
复制代码

03.声明变量

currentImage:any = true;//点击以后影藏当前的图片，显示loading
ImageScale:any;//后台返回的缩略图
uploadLinFail：false;//loading默认false，执行上传过程当中的加载动画


复制代码

04.方法

takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
      let ImageBase = 'data:image/jpeg;base64,' + imageData;
      this.currentImage = false;
      this.uploadLinFail = true;
      this.httpPost(ImageBase)	//httpPost上传图片的方法将图片传参到http请求方法中便可
      
    }, (err) => {
     // Handle error
     console.log("Camera issue:" + err);
     this.toast("图片上传失败")
    });
}
复制代码

这里的 httpPost()就是正常的http请求，依据本身的业务进行编写。

文件上传：

1、咱们须要注意

文件上传有一个很严重的误区，图片上传是文件上传的一部分不等于文件上传，即：文件上传能够上传video，image，apk等。但图片上传只能上传图片，因此在选择API的时候要注意：

一、fileTransfer.upload
二、imagePicker.getPictures

这两个API的区别是很大的，选择时必定要注意，包括不少博客上都选用fileTransfer。

2、代码示例

一样的咱们须要安装Ionic模块以便于咱们能够找到相应的API，安装Cordova插件以便于咱们能够在物理设备上运行它。

ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker
复制代码

.ts文件

constructor(private imagePicker: ImagePicker) { }
复制代码

使用：

option的参数全部都为 number 类型

const option：imagePickerOption = {
maximumImagesCount : 1,	// 可选择的图片数量默认 15，1为单选
width : 400  ,		// 图片宽
height : 500 ,		//图片高
quality :  80 ,		//图片质量，质量越高图片越大,请根据实际状况选择
outputType : 0		
/** 文件输出类型，你能够选择图片URL，或者base64的文件编码
这里建议选择文件编码  0  ：文件地址  1：图片base64编码*/
}

this.imagePicker.getPictures(options).then((results) => {
/**这里results返回的是一个数组，能够经过  results.pop()返回最后一个值，shift()返回第一个值，若是你只容许选择一个图片的话
，二者都是能够的，为了程序健壮性，这里建议你对results的长度进行判断处理。*/

  for (var i = 0; i < results.length; i++) {
      console.log('Image URI: ' + results[i]);
  }
}, (err) => { });

复制代码

若是有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。