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