ionic本地相册、拍照、裁剪、上传（单图完全版）

我不是女神ヾ 2022-04-22 15:26 197阅读 0赞

原文出处：[https://blog.csdn.net/u013007703/article/details/53196091][https_blog.csdn.net_u013007703_article_details_53196091]

延伸阅读：[Ionic2中的相册选择和拍照上传——ImgService][Ionic2_ImgService]

网络上已有的ionic图片选择上传博客碎片化过于严重，功能残缺或者引入了一些不必要的插件。这次以项目为契机，把ionic的图片选择、裁剪、上传整合一下，多图上传请戳ionic选择多张图片上传

###    插件安装 ###

cordova plugin add cordova-plugin-camera        //用于通过相机、相册选择图片并完成裁剪  
cordova plugin add cordova-plugin-file-transfer  //用于上传图片到服务器将功能封装为服务angular.module('starter.services', \[\])

//文件上传  
.factory('UploadFile', function(Toast) \{  
  return \{  
    /\*\*  
     \* 上传文件到服务器  
     \*  
     \* @param fileUrl 文件路径  
     \* @param server 服务器接口  
     \*/  
    uploadFile: function(fileUrl, server) \{  
      document.addEventListener("deviceready", onDeviceReady, false);  
      function onDeviceReady() \{  
        var options = new FileUploadOptions();  
        options.fileKey = "BeanYon";  
        options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);  
        options.mimeType = "image/jpeg";  
        options.chunkedMode = false;

var params = \{account: localStorage.account\};  
        options.params = params;

var ft = new FileTransfer();  
        ft.upload(fileUrl,   
                  encodeURI(server),   
                  success,   
                  err,   
                  options);  
      \}

function success(r)\{  
        Toast.show("设置头像成功");  
      \}

function err(error)\{  
        Toast.show("上传头像失败，请确保网络正常后再试");  
      \}  
    \}  
  \}  
\})

//配置单张图片选择  
.factory('SelectPicture', function(UploadFile, Toast) \{  
  return \{  
    /\*\*  
     \* 从相机或图库选择一张图片  
     \*   
     \* @param type 选择类型，0 拍照，1 相册  
     \* @param width 目标宽度  
     \* @param height 目标高度  
     \* @param scope $scope对象  
     \*/  
    chooseSinglePicture: function(type, width, height, scope) \{  
      document.addEventListener("deviceready", onDeviceReady, false);  
      function onDeviceReady() \{  
        var options = \{//相机配置  
          targetWidth: width,  
          targetHeight: height,  
          quality: 100,  
          allowEdit: true  
        \}

if(type == 1)\{//图片源设置为相册  
          options.sourceType = 2;  
        \}

navigator.camera.getPicture(  
          function(res)\{  
            scope.avatar\_src = res;  
            scope.$apply();  
            localStorage.avatar = res;  
            UploadFile.uploadFile(res, "我的服务器地址");//传递自己的服务器接口地址  
          \}, function(res)\{  
            Toast.show("选择头像失败");  
          \}, options  
        );  
      \}  
    \},

/\*\*  
     \* 从图库选择多张图片  
     \*/  
    choosePictures: function() \{  
      window.imagePicker.getPictures(function(res)\{  
        alert(res+",success");  
      \}, function(res)\{  
        alert(res+",failed");  
      \}, \{  
        maximumImagesCount: 10,    
        width: 80,    
        height: 80,    
        quality: 80   
      \});  
    \}  
  \}  
\});调用服务angular.module('starter.controllers', \[\])  
.controller('MyCtrl', function($scope, $state, $ionicActionSheet, UploadFile,Toast, SelectPicture) \{  
  $scope.avatar\_src = "img/default\_avatar.jpg";

/\*\*  
   \*选择头像  
   \*/  
  $scope.selectAvatar = function()\{  
    // 显示操作表  
    $ionicActionSheet.show(\{  
      buttons: \[  
        \{ text: '拍照' \},  
        \{ text: '从相册选择' \}  
      \],  
      buttonClicked: function(index) \{  
         //设置头像  
         SelectPicture.chooseSinglePicture(index, 120, 120, $scope);  
         return true;  
      \}  
    \});  
  \}  
\})

闫斌（BeanYon）  
\---------------------   
作者：闫斌\_BeanYon   
来源：CSDN   
原文：https://blog.csdn.net/u013007703/article/details/53196091   
版权声明：本文为博主原创文章，转载请附上博文链接！

[https_blog.csdn.net_u013007703_article_details_53196091]: https://blog.csdn.net/u013007703/article/details/53196091
[Ionic2_ImgService]: https://blog.csdn.net/qq_15096707/article/details/70239990#%E7%9B%B8%E5%86%8C%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E6%B1%89%E5%8C%96