ionic+anglar+cordova实现拍照上传及本地上传功能

一 插件安装

**//先检查是否已添加ngCordova，这一步一般使用过cordova插件都已经添加过了，不需要再添加。

$ bower install ngCordova //或者去别的项目拷贝

//安装相机插件 ionic cordova plugin add cordova-plugin-camera

二** 插件的依赖注入** app.js angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers', 'starter.services'])

html文件

拍照 选择文件 上传

controller.js

.controller('DashCtrl', function($scope,$ionicActionSheet, $cordovaCamera, fileUpload) {

//手机拍照上传
$scope.CameraFlag = false;
if(Camera){
    $scope.CameraFlag = true;
}
$scope.takePhoto=function(){
    $ionicActionSheet.show({
        buttons: [
            { text: '从相册选一张' },
            { text: '拍一张照片' }
        ],
        cancelText: '关闭',
        cancel: function() {
            return true;
        },
        buttonClicked: function(index) {
            switch (index) {
                case 0:
                    takePicture(Camera.PictureSourceType.PHOTOLIBRARY);
                break;
                case 1:
                    takePicture(Camera.PictureSourceType.CAMERA);
                    break;
                default:
                    break;
            }
            return true;
        }
    });
}

//拍照或从相册

var takePicture = function(sourceType) {

var options = {

quality: 100, //图片的质量

sourceType: sourceType, // 图片来源

destinationType: Camera.DestinationType.DATA_URL,//base64 编码的图像

//destinationType: Camera.DestinationType.FILE_URI,//图像文件的位置

allowEdit: true, // 允许编辑

targetWidth: 800, //图片宽

targetHeight: 800,

encodingType: Camera.EncodingType.JPEG, //保存的图片格式

saveToPhotoAlbum: true, //是否保存拍摄的照片到相册中去

correctOrientation: true //是否纠正拍摄的照片的方向

};

$cordovaCamera.getPicture(options).then(function(imageData) {

$scope.myFile = "data:image/jpeg;base64," + imageData; }, function(err) { ‘

});

}

//上传附件(不做任何改变)

$scope.uploadFile = function(obj, objPaperId) {

$ionicPlatform.ready(function() {

//var uploadUrl = commonFunc.getUrl("uploadMediaStr");

fileUpload.uploadFileToUrl(obj, uploadUrl).then(function(res) {

if (res.flag == 'T') {

$scope.murl = res.murl;$rootScope.hasAttas = false;

userMyService.myApplyAtta(objPaperId,$scope.murl).then(function(res) { if (res.flag == 'T') {

$ionicPopup.alert({

title: '提示',

template: '保存成功',

buttons: [{ text: '确定',

type: 'button-positive', onTap: function(e) {

return true; } }, ] });

userMyService.myApplyAttas($rootScope.pro.proId,$rootScope.buyerId).then(function(res) {

$scope.attasName = res.rows;

$scope.isAtta = res.isAtta;

})

//services.js

.service('fileUpload', ['$http', '$q', function($http, $q) { 
this.uploadFileToUrl = function(file, uploadUrl) {
var fd = new FormData();
if(typeof(file) == "string"){ //重点 如果是base64
//转化base64为二进制对象, 类似文件对象 
var byteString;
if (file.split(',')[0].indexOf('base64') >= 0){ 
byteString = atob(file.split(',')[1]); 
} else {
byteString = unescape(file.split(',')[1]); 
}

var mimeString = file.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) { 
ia[i] = byteString.charCodeAt(i); 
}
var file2 = new Blob([ia], {type:mimeString}); //console.log(file2); fd.append('upload', file2, 'photo.jpg');
} 
else 
{
//File对象 //console.log(file); //file 基本等于file2, 从而实现模仿form里的input type=file上传 

fd.append('upload', file);
} 
var deferred = $q.defer(); 
var promise = deferred.promise;
$http.post(uploadUrl,fd,{headers: { 'Content-Type': undefined }}).success(function(data) {deferred.resolve(data); //执行成功 
}).error(function(err) {deferred.reject(); //执行失败 }); 
return promise;
}}])