ionic3 拍照上传和多张照片上传

最新推荐文章于 2021-06-04 02:28:16 发布

HisAlert

最新推荐文章于 2021-06-04 02:28:16 发布

阅读量2k

点赞数 1

文章标签： ionic3 多张图片上传拍照

本文链接：https://blog.csdn.net/SIMI1111/article/details/84551890

版权

// cordova plugin add cordova-plugin-camera

// npm install --save @ionic-native/camera



// ionic cordova plugin add cordova-plugin-file

// npm install --save @ionic-native/file



// ionic cordova plugin add cordova-plugin-file-transfer

// npm install --save @ionic-native/file-transfer





ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message" npm install --save @ionic-native/image-picker



import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';

import { Camera, CameraOptions } from '@ionic-native/camera';



import { FormBuilder, FormGroup } from '@angular/forms';



import { File } from '@ionic-native/file';

import { ImagePicker } from '@ionic-native/image-picker';

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';







@Component({

selector: 'page-contact',

templateUrl: 'contact.html'

})

export class ContactPage {

path: string;

loginForm: FormGroup;

username: any;

password: any;

fileTransfer: FileTransferObject = this.transfer.create();



constructor(public navCtrl: NavController,

public navParams: NavParams,

private camera: Camera,

private transfer: FileTransfer, private file: File, private formBuilder: FormBuilder, private imagePicker: ImagePicker) {

}





// 调用相册时传入的参数

private imagePickerOpt = {

maximumImagesCount: 1,//选择一张图片

width: 800,

height: 800,

quality: 80

};

// 图片上传的的api

public uploadApi: string;

/**

* 打开摄像头

*/

openCamera() {

const options: CameraOptions = {

quality: 90, //相片质量 0 -100

destinationType: this.camera.DestinationType.DATA_URL, //DATA_URL 是 base64 FILE_URL 是文件路径

encodingType: this.camera.EncodingType.JPEG,

mediaType: this.camera.MediaType.PICTURE,

saveToPhotoAlbum: true, //是否保存到相册

// sourceType: this.camera.PictureSourceType.CAMERA , //是打开相机拍照还是打开相册选择 PHOTOLIBRARY : 相册选择, CAMERA : 拍照,

}

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

// If it's base64:

let base64Image = 'data:image/jpeg;base64,' + imageData;

this.path = base64Image;

this.upload();

//If it's file URI

// this.path = imageData;

}, (err) => {

// Handle error

});

}

/**

* 文件上传

*/

upload() {

const apiPath = "http://192.168.16.71/IonicApp/control/uploadUserImage";

alert(localStorage.getItem("userName"))

let options: FileUploadOptions = {

fileKey: 'file',

fileName: localStorage.getItem("userName") + '.jpg', //文件名称

headers: {},

// 如果要传参数，写这里

params: {

username: localStorage.getItem("userName")

}

};

this.fileTransfer.upload(this.path, apiPath, options)

.then((data) => {

alert(JSON.stringify(data))

}, (err) => {

alert(err.error)

});

}

// 打开手机相册

private openImgPicker() {

let temp = '';

this.imagePicker.getPictures(this.imagePickerOpt)

.then((results) => {

for (var i = 0; i < results.length; i++) {

temp = results[i];

}

alert(temp)

this.path = temp;

this.upload();

}, (err) => {

alert('ERROR:' + err);//错误：无法从手机相册中选择图片！

});

}



}



TODO：多张上传就是循环照片数组中的值然后使用this.fileTransfer.upload上传