IONIC3 calls local albums and uploads pictures _ionic3

Required Plug-ins (Ionic official website native):

$ 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-camera
$ npm Install--save @ionic-native/camera

$ ionic Cordova Plugin Add cordova-plugin-telerik-imagepicker--variable "need to visit your albums"
$ npm Install--save @ionic-native/image-picker

App.module.ts Import Plug-in

Import {Imagepicker} from ' @ionic-native/image-picker '; Import {filetransfer, fileuploadoptions, filetransferobject} from ' @ionic-native/file-transfer '; Import {File} from ' @ionic-native/file ';

Declare in provides

Providers: [...] Camera, Imagepicker, File, Filetransferobject, Filetransfer]

Custom services:

Picture uploaded service,

Import {injectable} from "@angular/core"; Import {Actionsheetcontroller} from "Ionic-angular";
Import {Imagepicker} from ' @ionic-native/image-picker '; Import {Camera} from ' @ionic-native/camera '; Import {filetransfer, fileuploadoptions, filetransferobject} from ' @ionic-native/file-transfer '; Import {File} from ' @ionic-native/file '; Import {Toastservice} from ". /toast-service/toast-service ";
@ Injectable () Export class Imgservice {
Parameters passed in when calling camera private cameraopt = {quality:50, destinationtype:1,//Camera.DestinationType.FILE_URI, sourcetype:1,// Camera.PictureSourceType.CAMERA, encodingtype:0,//Camera.EncodingType.JPEG, mediatype:0,// Camera.MediaType.PICTURE, Allowedit:true, correctorientation:true};
Parameters passed in when calling an album private imagepickeropt = {maximumimagescount:1,//Select a picture width:800, height:800, quality:80};
The picture uploads the API public uploadapi:string;
Upload:any = {filekey: ' upload ',///Receive picture key fileName: ' Imagename.jpg ', headers: {' Accept ': ' Text/html,application/xht ml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 '//No join error occurred. }, params: {},//need additional upload Parameters success: (data) => {},//////////////////////////////////////////////// {}//monitor upload process};
Constructor (private Actionsheetctrl:actionsheetcontroller, private noticeser:toastservice, private Camera:camera, p Rivate Imagepicker:imagepicker, Private transfer:filetransfer, private file:file, private FILETRANSFER:FILETRANSFE Robject) {
This.filetransfer = This.transfer. Create (); }

Showpicactionsheet () {this. useascomponent ();}
Use the Actionsheet component in Ionic private useascomponent () {Let Actionsheet = This.actionsheetctrl. Create ({title: ' Please choose ', button S: [{text: ' photo ', Handler: () => {this. Startcamera ();}}, {text: ' Select from cell Phone album ', Handler: () => {this. Openimgpicke R (); }, {text: ' Cancel ', role: ' Cancel ', Handler: () => {
} } ] }); Actionsheet. Present (); }
Use native Actionsheet components/*private usenativeas () {Let buttonlabels = [' Photograph ', ' Choose from phone album ']; Actionsheet.show ({' title ': ' Choice ', ' buttonlabels ': buttonlabels, ' Addcancelbuttonwithlabel ': ' Cancel ',//' Adddestructivebuttonwithlabel ': ' Delete '}). Then ((buttonindex:number) => {if (Buttonindex = 1) {This.startcamera () ; else if (Buttonindex = 2) {This.openimgpicker ();}}); }*/

Start photo feature private Startcamera () {This.camera. Getpicture (this.cameraopt). Then ((ImageData) => {this. uploadimg (imag Edata); }, (Err) =>{this.noticeser. Showtoast (' ERROR: ' + err);//Error: Unable to use the camera feature. }); }
Open the Phone album Private Openimgpicker () {Let temp = '; This.imagepicker. Getpictures (this.imagepickeropt) then ((results) = > {for (var i = 0; i < results.length i + +) {temp = results[i];}
This. Uploadimg (temp);
(err) => {this.noticeser. Showtoast (' ERROR: ' + err ');//Error: Unable to select pictures from the phone album. }); }

Upload picture Private uploadimg (path:string) {if (!path) {return;}
Let Options:any; Options = {FileKey:this.upload.fileKey, headers:this.upload.headers, params:this.upload.params}; This.filetransfer Upload (path, THIS.UPLOADAPI, options). Then (data) => {
if (this.upload.success) {this.upload. Success (JSON. Parse (data.response));
}, (Err) => {if (this.upload.error) {this.upload. Error (ERR);} else {this.noticeser. Showtoast (' ERROR: Upload failed. '); } }); }
Stop uploading stopupload () {if (This.filetransfer) {This.filetransfer. Abort ();}}}

Customize a bullet Box tip:

Import {injectable} from ' @angular/core '; Import {Toastcontroller} from ' Ionic-angular ';
@ Injectable () Export class Toastservice {static toast_pos_bottom:string = ' top '; static toast_pos_middle:string = ' m Iddle ';
Constructor (private Toastctrl:toastcontroller) {}
Display TOAST hint Showtoast (message:string, position:string = toastservice.toast_pos_bottom) {Let TOAST = This.toastctrl . Create ({message:message, duration:2000, position:position}); Toast. Present ();
return toast; }
Shownoticebytoast (Code:number, msg:string) {Let M = ';
if (msg && msg.length > 0) {if (msg. charAt (msg.length-1) = '! ' | | msg. CHARAT (msg.length-1) = = '. ') {msg = Msg. substr (0, msg.length-1);}}
if (code = = 1) {m = ' hint: ' + msg + '. '; else {m = ' error ' + code + ': ' + msg + '. '; }
return this. Showtoast (m); } }

Use:

Avatar Pictures Select related start private Initimgser () {this.imgSer.uploadApi = ' ... '; this.imgSer.upload success = (data) => {th Is.doctorData.avatar = Data.data.url; }; This.imgSer.upload. Error = (err) => {this.toastser. Showtoast (' upload failed '); }
Avatarchoice () {this. Initimgser (), This.imgser. Showpicactionsheet ();}//End

PS: From--http://blog.csdn.net/qq_15096707/article/details/70239990, made changes on this basis