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