ionic4实现拍照上传功能

安装插件

在实现安装文件上传插件的时候，如果报错，可能需要先安装文件插件，否则会报错

相机插件
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera

文件插件， 默认情况下先不引入，因为后面会报错
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

文件上传插件
ionic cordova plugin add cordova-plugin-file-transfer
npm install @ionic-native/file-transfer

在app.module.ts中引入对应的插件并providers

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 相机插件
import { Camera } from '@ionic-native/camera/ngx';
// 文件插件,不需要导入
import { File } from '@ionic-native/file/ngx';
// 文件上传插件
import {FileTransfer} from '@ionic-native/file-transfer/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Device,
    Camera, // 相机
    File, // 文件，不需要提供
    FileTransfer, // 文件上传
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

在使用的地方引入并注入

import {CameraOptions} from '@ionic-native/camera';
import { Component } from '@angular/core';
import { Camera } from '@ionic-native/camera/ngx';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file'; // 不需要导入

@Component({
    selector: 'app-tab2',
    templateUrl: 'tab2.page.html',
    styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

    constructor(
        private transfer: FileTransfer,
        // private file: File, // 不能注入file,否则报错
        private camera: Camera
    ) {}

    // 拍照
    imgUpload() {
        const options: CameraOptions = {
            quality: 100,   // 图片质量
            destinationType: this.camera.DestinationType.FILE_URI, // 返回类型 .FILE_URI 返回文件地址 .DATA_URL 返回base64编码
            encodingType: this.camera.EncodingType.JPEG, // 图片格式 JPEG=0 PNG=1
            mediaType: this.camera.MediaType.PICTURE, // 媒体类型
            sourceType: this.camera.PictureSourceType.CAMERA, // 图片来源  CAMERA相机 PHOTOLIBRARY 图库
            allowEdit: true, // 允许编辑
            targetWidth: 300, // 缩放图片的宽度
            targetHeight: 300, // 缩放图片的高度
            saveToPhotoAlbum: false, // 是否保存到相册
            correctOrientation: true, // 设置摄像机拍摄的图像是否为正确的方向
        };

        this.camera.getPicture(options).then((imageData) => {
            // 返回拍照的地址
            this.doUpload(imageData);
        }, (err) => {
            alert(err);
        });
    }

    // 文件上传
    doUpload(src: any) {
        const fileTransfer: FileTransferObject = this.transfer.create();

        const options: FileUploadOptions = {
            fileKey: 'file',
            fileName: 'name.jpg',
            mimeType: 'image/jpeg',
            httpMethod: 'POST',
            params: { username : '张三', age : '20', height : '190' },
            headers: {}
        };

        const api = 'http://39.108.159.135/imgupload';

        fileTransfer.upload(src, encodeURI(api), options)
        .then((data) => {
            alert(JSON.stringify(data));
        }, (err) => {
            alert(JSON.stringify(err));
        });
    }

}

注：虽然前面安装了文件插件，但是这里不能注入文件插件否则报错

效果预览（上传成功）