ionic1.x+angular1.x实现拍照上传

￡神魔★判官ぃ 2022-05-27 04:19 156阅读 0赞

一、插件安装

//先检查是否已添加ngCordova，这一步一般使用过cordova插件都已经添加过了，不需要再添加。
    $ bower install ngCordova //或者去别的项目拷贝
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    //安装相机插件
    ionic cordova plugin add cordova-plugin-camera

二、依赖注入插件

//app.js
    angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers', 'starter.services'])
    //controllers.js 写在下面

三、代码实现

//html代码
    <span ng-if="!x.electronicUrl">
        <a href="javascript:;" class="file" ng-click="takePhoto();" ng-if="CameraFlag">拍照</a>
        <a href="javascript:;" class="file" >选择文件
            <input type="file"  name="upload" multiple="multiple" file-model="myFile" >
        </a>
        <button class="utrbtn-blue" ng-click="uploadFile(myFile,x.objPaperId)">上传</button>
    </span>
    //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) {
                //console.log(imageData.slice(0,20));
                $scope.myFile = "data:image/jpeg;base64," + imageData;
            }, function(err) {
                //
            });
        }
        //上传附件(不做任何改变)
        $scope.uploadFile = function(obj, objPaperId) {
            $ionicPlatform.ready(function() {
                var uploadUrl = commonFunc.getUrl("upload");
                //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: '<b>确定</b>',
                                        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;
                                })
    
                            } else {
                                $ionicPopup.alert({
                                    title: '提示',
                                    template: '保存失败',
                                    buttons: [{
                                        text: '<b>确定</b>',
                                        type: 'button-positive',
                                        onTap: function(e) {
                                            return true;
                                        }
                                    }, ]
                                });
                            }
                        })
                    }
                });
            })
        };
        
        
    
    })
    //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;
            }
        }
    ])

四、文件对象

遇到问题，使用base64直接往后台传，只能传特别小的图片，小于1k，实在没办法，还是回到最原始的表单form附件提交，拼凑了一个Blob对象来实现。下面演示html5的FileReader和Blo用法。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>预览本地文件</title>
    </head>
    <body>
    
    <input type="file" onchange="previewImage()" >
    <img src="" height="200">
    <div id="result"></div>
    
    <script>
        //预览图片
        function previewImage() {
            var preview = document.querySelector('img');
            var preview2 = document.querySelector('#result');
            var file = document.querySelector('input[type=file]').files[0];
            console.log(file);//正常的文件对象, 上传的就是它
            var reader = new FileReader();
            reader.onloadend = function () {
                preview.src = reader.result; //假设现在拿到一个图片的base64, 如拍照
                preview2.innerHTML = reader.result;
                var myBlob = dataURItoBlob(reader.result)
                console.log(myBlob);//自己制造的文件对象, 次对象就可以模拟上传
            }
            if (file) {
                reader.readAsDataURL(file); //64位编码 
            } else {
                preview.src = "";
            }
            console.log(reader);
        }
        function dataURItoBlob(base64Data) {
            var byteString;
            if (base64Data.split(',')[0].indexOf('base64') >= 0){
                byteString = atob(base64Data.split(',')[1]);
            } else {
                byteString = unescape(base64Data.split(',')[1]);
            }
            var mimeString = base64Data.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);
            }
            return new Blob([ia], {type:mimeString});
        }
    </script>
    </body>
    </html>

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220527/8e8514941a994ad0b6fe30aa388c2a2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220527/14ca9ec161c041d191972a58a6f7c460.png