1所用到的插件
1)cordova-plugin-camera
安装地址和步骤http://ionicframework.com/docs/native/camera/
2)ImagePicker
安装地址和步骤http://ionicframework.com/docs/native/image-picker/
2直接上代码(移动端代码)
import { Camera } from "ionic-native";
import { ImagePicker } from '@ionic-native/image-picker';
//下面的代码写在一个公用的方法
let actionSheet = this.actionSheetCtrl.create({
buttons: [
{
text: '从相册选择',
handler: () => {
const options = {//options表示选取的图片参数
maximumImagesCount: 5,//一次性最多只能选5张,ios系统无效,android上面有效
width: 500,//图片的宽度
height: 500,//图片的高度
quality: 50,//图片的质量0-100之间选择
outputType: 1 // default .FILE_URI返回影像档的,0表示FILE_URI返回影像档的也是默认的,1表示返回base64格式的图片
}
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
arry.push("data:image/jpeg;base64," + results[i]);//处理图片的格式,用于向服务器传输
}
}, (err) => { });
}
}, {
text: '拍照',
handler: () => {
const options = {
quality: 99,相片质量
sourceType: Camera.PictureSourceType.CAMERA,//从哪里选择图片,PHOTOLIBRARY=0(相册选择),PHOTOLIBRARY=1(相机拍照),PHOTOLIBRARY=2(相册选择)
destinationType: Camera.DestinationType.DATA_URL,//返回类型,DATA_URL= 0,返回作为 base64 編碼字串。 FILE_URI=1,返回影像档的 URI。NATIVE_URI=2,返回图像本机URI (例如,資產庫)
// allowEdit: true,//在选择之前允许修改截图
encodingType: Camera.EncodingType.JPEG,//保存的图片格式: JPEG = 0, PNG = 1
targetWidth: 900,//照片的宽度
targetHeight: 900,//照片的高度
mediaType: Camera.MediaType.PICTURE,//可选媒体类型:圖片=0,只允许选择图片將返回指定DestinationType的参数。 視頻格式=1,允许选择视频,最终返回 FILE_URI。ALLMEDIA= 2,允许所有媒体类型的选择。
// saveToPhotoAlbum: true,//保存到相册
cameraDirection: 0,//摄像头类型Back= 0,Front-facing = 1
// popoverOptions: new CameraPopoverOptions(300, 300, 100, 100, this.camera.PopoverArrowDirection.ARROW_ANY)
}
Camera.getPicture(options).then((imageData) => {
arry.push("data:image/jpeg;base64," + imageData);
}, (err) => {
});
}
}, {
text: '取消',
role: 'cancel',
handler: () => {
}
}
]
});
actionSheet.present();
3网络请求(移动端)
upload(path, array, str) {//path图片上传路由,array存放着图片的base64格式的数组,str表示将要存放在服务器已str命名的文件夹下面
if (array.length === 0) {
return Promise.resolve(array);
}
return new Promise((resolve, reject) => {
const ep = new eventproxy();
ep.after('files', array.length, (files) => {
resolve(files);
});
for (let s in array) {
let header = new Headers();
header.append('Content-Type', 'application/json');
let pramas = JSON.stringify({ "url": array[s], "name": str })
let options = new RequestOptions({ headers: header });
this.http.post(this.path + path, pramas, options).toPromise()
.then(res => {
ep.emit('files', res.json())
})
.catch(err => {
reject(err);
});
}
})
}
4nodejs服务端代码(如果不懂nodejs,express框架,那下面的代码就爱莫能助了)
xx.js文件
import formidable from 'formidable';
import mkdirp from 'mkdirp';
import fs from 'fs';
import config from '../config';
import eventproxy from 'eventproxy';
import moment from 'moment';
//手机图片上传
uploadImg(req, res, next) {
const ep = new eventproxy();
let img = req.body.url;
let type = req.body.name;
let base64 = img.split(',');
let dataBuffer = new Buffer(base64[1], 'base64');
let folder = 'upload/' + type;
let name = 'image_' + moment().valueOf() + '.jpg';
let path = folder + '/' + name;
ep.on('folder_exist', () => {
fs.writeFile(path, dataBuffer, (err) => {
if (err) {
return next(err);
}
fs.exists(path, (exists) => {
if (exists) {
console.log('path', path);
res.json(path);
} else {
res.json({ "error": "error" });
}
})
// let states = fs.statSync(path); 注释的这部分代码是对图片进行大小处理的,有兴趣的可以google一下这个插件的使用,目前我是不需要
// sharp(path)
// .resize(110, 110)
// //.background({ r: 0, g: 0, b: 0, a: 0 })
// .embed()
// .toFile(utils.getImgPath110x110(path), err => {
// if (err) {
// logger.error(`upload_app:sharp:${path}:${err}`);
// }
// ep.emit('all_done', utils.getImgPath110x110(path));
// });
// ep.on('all_done', (file) => {
// res.setHeader('Cache-Control', 'no-cache');
// res.json({ 'path': path, 'name': name, size: states.size });
// });
// sharp(path)
// .resize(350, 350)
// //.background({ r: 0, g: 0, b: 0, a: 0 })
// .embed()
// .toFile(utils.getImgPath(path, 350, 350), err => {
// if (err) {
// logger.error(`upload_app:sharp:${files.file.path}:${err}`);
// }
// });
});
});
fs.exists(folder, (exists) => {
if (exists) {
return ep.emit('folder_exist');
}
mkdirp(folder, (err) => {
if (err) {
return next(err);
}
ep.emit('folder_exist');
});
});
},