環(huán)境準(zhǔn)備
安裝 cordova-plugin-camera 插件
cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
安裝File插件
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file
安裝File Transfer插件
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer
在app.module.ts里做引用
import { Camera } from "@ionic-native/camera";
import { File } from "@ionic-native/file";
import { FileTransfer } from "@ionic-native/file-transfer";
providers: [
StatusBar,
? SplashScreen,
? Camera,
? File,
? AlipayChenyu,
? FileTransfer,
//修改頭像
doHead() {
let actionSheet =this.actionsheetCtrl.create({
buttons: [
{
text:'相機',
? ? ? ? icon: !this.platform.is('ios') ?'logo-instagram' :null,
? ? ? ? handler: () => {this.openCamera();? }
},
? ? ? {
text:'從相冊中選一個',
? ? ? ? icon: !this.platform.is('ios') ?'md-image' :null,
? ? ? ? handler: () => {
this.openlibray();
? ? ? ? }
},
? ? ? {
text:'取消',
? ? ? ? role:'cancel', // will always sort to be on the bottom
? ? ? ? icon: !this.platform.is('ios') ?'close' :null,
? ? ? ? handler: () => {
????????????console.log('Cancel clicked');
? ? ? ? }
}
]
});
? actionSheet.present();
}
/**
* 打開攝像頭
*/
openCamera() {
const options: CameraOptions = {
allowEdit:true,
? ? quality:80,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //相片質(zhì)量0 -100
? ? targetWidth:500,//寬
? ? targetHeight:500,//高
? ? destinationType:this.camera.DestinationType.FILE_URI,? ? ? ? //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;
//If it's file URI
? ? let info=this.doStorage.get('info');
? ? this.http.upload('', {}, imageData).then((data) => {
this.path = data;
? ? })
? }, (err) => {
// Handle error
? });
}
openlibray() {
const options: CameraOptions = {
allowEdit:true,
? ? quality:80,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //相片質(zhì)量0 -100
? ? targetWidth:500,//寬
? ? targetHeight:500,//高
? ? destinationType:this.camera.DestinationType.FILE_URI,? ? ? ? //DATA_URL是 base64? FILE_URL 是文件路徑
? ? encodingType:this.camera.EncodingType.JPEG,
? ? mediaType:this.camera.MediaType.PICTURE,
? ? saveToPhotoAlbum:true,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //是否保存到相冊
? ? sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,? ? ? ? //是打開相機拍照還是打開相冊選擇? PHOTOLIBRARY : 相冊選擇, CAMERA : 拍照,
? }
this.camera.getPicture(options).then((imageData) => {
// If it's base64:
// let base64Image = 'data:image/jpeg;base64,' + imageData;
// this.path = base64Image;
//If it's file URI
? ? let info=this.doStorage.get('info');
? ? this.http.upload('', {}, imageData).then((data) => {
this.path = data;
? ? })
}, (err) => {
// Handle error
? });
}
/**
* 圖片上傳
* @param url? 上傳路徑
* @param josn? ? 上傳參數(shù)
* @param img? ? 上傳圖片
* @returns {Promise}
*/
upload(url, josn, img): Promise {
return new Promise((resolve, reject) => {
let info =this.storage.get('info');
? ? let apiPath =this.config.apiUrl + url;
? ? let options: FileUploadOptions = {
fileKey:'file',
? ? ? fileName:'name.jpg',? //文件名稱
? ? ? headers: josn,
? ? ? // 如果要傳參數(shù)酥馍，寫這里
? ? ? params: josn
};
? ? this.fileTransfer.upload(img, apiPath, options)
.then((data) => {
resolve(img);
? ? ? }, (err) => {
});
? });
}
