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=1mediaType: 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));});}}

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

效果预览（上传成功）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！