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>

二、实现思路以及逻辑

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

2.将

this.camera.getPicture(options).then(()=>{})

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

3.在图片上传过程中我们需要监控camera插件本身的then和catch状态，并及时给用户信息反馈，失败后调用 this.toast（‘图片上传失败’）。

三、代码示例

3.1、根模块（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请求，依据自己的业务进行编写。

文件上传：

一、我们需要注意

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

1、fileTransfer.upload
2、imagePicker.getPictures

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

二、代码示例

同样的我们需要安装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) => { });

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