ionic4实现拍照上传功能

忘是亡心i 2021-12-11 02:13 399阅读 0赞

#### 安装插件 ####

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

相机插件
    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));
            });
        }
    
    }

**注：虽然前面安装了文件插件，但是这里不能注入文件插件否则报错**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

#### 效果预览（上传成功） ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211210/787cea0caa8e48a2ae9287cf4f902c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20211210/f483ce5259a5464e9cae52911f474c5e.png