// 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上传