ionic2框架 图片选择与上传(支持ios,android)

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');       });     });   },