ionic圖片上傳

1.多個(gè)圖片上傳

$ ionic cordova plugin add cordova-plugin-camera

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

導(dǎo)入模塊:import { Camera, CameraOptions } from '@ionic-native/camera';

app.module.ts中引入模塊;

事件執(zhí)行:

addImg() {

if (this.imagePaths.length == 3) {

let tipLoader = this.loadingCtrl.create({

content: "最多添加3張!",

spinner: 'hide',

duration: 800,

showBackdrop: true

});

tipLoader.present();

return;

}

let actionSheet = this.actionsheetCtrl.create({

cssClass: 'action-sheets-basic-page',

buttons: [

{

text: '拍照',

handler: () => {

this.takePhoto();

}

},

{

text: '從手機(jī)相冊(cè)選擇',

handler: () => {

this.choosePhoto();

}

},

{

text: '取消',

role: 'cancel',

handler: () => {

console.log('取消選擇圖片');

}

}

]

});

actionSheet.present();

};

takePhoto() {

var options = {

// Some common settings are 20, 50, and 100

quality: 50,

destinationType: this.camera.DestinationType.FILE_URI,

// In this app, dynamically set the picture source, Camera or photo gallery

width:50,

height:50,

encodingType: this.camera.EncodingType.JPEG,

mediaType: this.camera.MediaType.PICTURE,

saveToPhotoAlbum:true,

sourceType:this.camera.PictureSourceType.CAMERA,//拍照時(shí),此參數(shù)必須有,否則拍照之后報(bào)錯(cuò),照片不能保存

correctOrientation: true? //Corrects Android orientation quirks

}

/**

* imageData就是照片的路徑,關(guān)于這個(gè)imageData還有一些細(xì)微的用法,可以參考官方的文檔。

*/

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

// imageData is either a base64 encoded string or a file URI

// If it's base64:

let base64Image =? imageData;

// this.path = base64Image;//給全局的文件路徑賦值。

this.imagePaths.push(base64Image);

/*? this.zone.run(() => this.image = base64Image);*/

}, (err) => {

// Handle error,出錯(cuò)后,在此打印出錯(cuò)的信息。

alert( err.toString());

});

}



choosePhoto() {

var options: CameraOptions = {

// Some common settings are 20, 50, and 100

quality: 50,

destinationType: this.camera.DestinationType.FILE_URI,

// In this app, dynamically set the picture source, Camera or photo gallery

sourceType:0,//0對(duì)應(yīng)的值為PHOTOLIBRARY ,即打開(kāi)相冊(cè)

encodingType: this.camera.EncodingType.JPEG,

mediaType: this.camera.MediaType.PICTURE,

allowEdit: true,

correctOrientation: true? //Corrects Android orientation quirks

}

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

let base64Image =? imageData;

this.imagePaths.push(base64Image);

}, (err) => {

});

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容