[Talk is cheap. Show me the code]
不想看理论知识请直接移步最后代码示例。
(本文还是建议看下整体思路)
最初我写APP的时候使用 了Ionic3，今天去看了下文档，Ionic4相对于3的文档说明更清晰，代码也更加简化，社区变得越来越好还真是有点小开心呢。但也有批评说Ionic4相对于3更复杂，坑更多。
手机端图片上传有两种方式一种是 <font color=red size=4 face="黑体">拍照上传</font> 另一种是 <font color=red size=4 face="黑体">图片选择</font> （请注意这里与文件选择的区别） 之后上传，废话不多说进入正题。
拍照上传：
一、前置条件
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的时候要注意：
<font color=red size=4 face="黑体">1、fileTransfer.upload</font>
<font color=red size=4 face="黑体">2、imagePicker.getPictures</font>
这两个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) => { });
如果有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。
