ionic3 调用本地相册并上传图片
需要的插件(ionic 官网 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 PHOTO_LIBRARY_USAGE_DESCRIPTION="需要访问您的相册"
$ npm install --save @ionic-native/image-picker
app.module.ts 导入插件
import { ImagePicker } from '@ionic-native/image-picker';
import { FileTransfer, FileUploadOptions, FileTransferObject }from'@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
在provides中声明
providers: [
.....
Camera,
ImagePicker,
File,
FileTransferObject,
FileTransfer
]
自定义services:
图片上传的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 classImgService {
// 调用相机时传入的参数
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
};
// 调用相册时传入的参数
private imagePickerOpt = {
maximumImagesCount: 1, //选择一张图片
width: 800,
height: 800,
quality: 80
};
// 图片上传的的api
public uploadApi: string;
upload: any = {
fileKey: 'upload', //接收图片时的key
fileName: 'imageName.jpg',
headers: {
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' //不加入 发生错误！！
},
params: {}, //需要额外上传的参数
success: (data) => {}, //图片上传成功后的回调
error: (err) => {}, //图片上传失败后的回调
listen: () => {} //监听上传过程
};
constructor(privateactionSheetCtrl: ActionSheetController,
private noticeSer: ToastService,
private camera: Camera,
private imagePicker: ImagePicker,
private transfer: FileTransfer,
private file: File,
private fileTransfer: FileTransferObject) {
this.fileTransfer = this.transfer.create();
}
showPicActionSheet() {
this.useASComponent();
}
// 使用ionic中的ActionSheet组件
private useASComponent() {
let actionSheet = this.actionSheetCtrl.create({
title: '请选择',
buttons: [
{
text: '拍照',
handler: () => {
this.startCamera();
}
},
{
text: '从手机相册选择',
handler: () => {
this.openImgPicker();
}
},
{
text: '取消',
role: 'cancel',
handler: () => {
}
}
]
});
actionSheet.present();
}
// 使用原生的ActionSheet组件
/*private useNativeAS() {
let buttonLabels = ['拍照', '从手机相册选择'];
ActionSheet.show({
'title': '选择',
'buttonLabels': buttonLabels,
'addCancelButtonWithLabel': 'Cancel',
//'addDestructiveButtonWithLabel' : 'Delete'
}).then((buttonIndex: number) => {
if(buttonIndex == 1) {
this.startCamera();
} else if(buttonIndex == 2) {
this.openImgPicker();
}
});
}*/
// 启动拍照功能
private startCamera() {
this.camera.getPicture(this.cameraOpt).then((imageData) => {
this.uploadImg(imageData);
}, (err) => {
this.noticeSer.showToast('ERROR:' + err); //错误：无法使用拍照功能！
});
}
// 打开手机相册
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); //错误：无法从手机相册中选择图片！
});
}
// 上传图片
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('错误：上传失败！');
}
});
}
// 停止上传
stopUpload() {
if (this.fileTransfer) {
this.fileTransfer.abort();
}
}
}
// 自定义一个弹框提示:
import {
Injectable
} from '@angular/core';
import {
ToastController
} from 'ionic-angular';
@Injectable()
export classToastService {
static TOAST_POS_BOTTOM: string = 'top';
static TOAST_POS_MIDDLE: string = 'middle';
constructor(privatetoastCtrl: ToastController) {
}
// 显示 toast提示
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 = '提示：' + msg + '！';
} else {
m = '错误' + code + '：' + msg + '！';
}
return this.showToast(m);
}
}
使用:
private initImgSer() {
this.imgSer.uploadApi = '.....';
this.imgSer.upload.success= (data)=> {
this.doctorData.avatar = data.data.url;
};
this.imgSer.upload.error= (err)=> {
this.toastSer.showToast('上传失败');
};
}
avatarChoice() {
this.initImgSer();
this.imgSer.showPicActionSheet();
}
ps: 来源于--http://blog.csdn.net/qq_15096707/article/details/70239990, 在此基础上做了更改