ionic2 实现多图片上传

日常开头图片系列

插件的使用，主要有以下几个重要步骤：

• 首先安装插件，对应的版本号要明确
• 在config.xml中加上对应的插件名称和版本号
• 然后删除之前的项目工程，ionic platform rm android
• 再新建项目工程，ionic platform add android
• 打包debug包，ionic build android
• 打包正式包，ionic build android --prod --release
• 进入项目工程目录下，cd platforms cd android
• 生成签名文件，keytool -genkey -v -keystore myApp.keystore -alias myAppKey -keyalg RSA -keysize 2048 -validity 20000，其中 myApp.keystore为签名文件，myApp.apk是签名成功后的apk名称，都是可以改成自己想要的名称。这里插播个题外话，就是在微信支付这块，这里生成的签名，需要使用微信支付官方的小应用来根据自己的包名获取对应的签名，然后要更新填入到开放平台下对应的app应用中。小工具下载链接在这里
• 把生成的未签名的apk复制粘贴到和签名同目录下（项目工程目录下）
• 对apk签名，jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myApp.keystore -signedjar myApp.apk android-release-unsigned.apk myAppKey

以上是较为完整的使用插件和打包项目的步骤。其中调试用的是debug包，在前面的文章中有介绍，这里就不重复。
下面来进入正题。

下载安装相关插件

ionic plugin add [email protected]

ionic plugin add [email protected]

ionic plugin add [email protected]

ionic plugin add [email protected]

添加到config.xml中

js和html中代码的实现

JS

.controller('Publish_tshirtCtrl', ['$rootScope', '$scope', '$state', '$stateParams', '$location', '$ionicPopup', '$cookies', '$ionicHistory', '$ionicModal', '$ionicScrollDelegate', '$timeout', '$ionicLoading', '$ionicNativeTransitions','$filter', 'Util', '$ionicPopover', 'StringUtil', 'ClientOpt', 'MyDialog', 'YorderUtil', 'AppUpdateService', 'JpushService', '$ionicActionSheet', 'Constant', '$cordovaCamera', '$cordovaImagePicker', '$cordovaFileTransfer',
        function ($rootScope, $scope, $state, $stateParams, $location, $ionicPopup, $cookies, $ionicHistory, $ionicModal, $ionicScrollDelegate, $timeout, $ionicLoading, $ionicNativeTransitions, $filter, Util, $ionicPopover, StringUtil, ClientOpt, MyDialog, YorderUtil, AppUpdateService, JpushService, $ionicActionSheet, Constant, $cordovaCamera, $cordovaImagePicker, $cordovaFileTransfer) {
    //这里需要将安装的几个插件写到上面的函数中
            $scope.image_list = [];
            $scope.selectSize = '';
            $scope.$on('$ionicView.enter', function (scopes, states) {
                $scope.rootEle = $("#publish_tshirt[nav-view='active']");
                if ($scope.loaded) {
                    return;
                }
                $scope.loaded = true;
                $rootScope.shijiReload = false;
                $scope.init();
            });
            $scope.init = function () {
                
            };
            $scope.submit = function () {
                var rootEle = $scope.rootEle;
                var ex_name = $('#ex_name').val();
                ClientOpt.opt({
                    act: 'goods',
                    op: 'exchange',
                    ex_name: ex_name
                }, function (json) {
                    if (!StringUtil.isEmpty(json.datas.error)) {
                        MyDialog.tip(json.datas.error);
                    }
                    else {
                        $scope.ex_id = json.datas.ex_id;
                        $scope.upImage($scope.image_list);
                        //MyDialog.tip("发布成功");
                    }
                });
            }

            $scope.selectImg = function () {
                $ionicActionSheet.show({
                    buttons: [{
                        text: '相册'
                    }, {
                        text: '拍照'
                    }
                    ],
                    titleText: '选择图片',
                    cancelText: '取消',
                    cancel: function () {
                    },
                    buttonClicked: function (index) {
                        switch (index) {
                            case 0:
                                $scope.pickImage();
                                break;
                            case 1:
                                $scope.takePhoto();
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
            };
            $scope.pickImage = function () {
                var options = {
                    maximumImagesCount: 9, //这里是选择几个图片
                    width: 800,
                    height: 800,
                    quality: 80
                };
                $cordovaImagePicker.getPictures(options)
                    .then(function (results) {
                        $scope.image_list = results;
                    }, function (error) {
                        MyDialog.tip(error);
                    });
            };
            $scope.takePhoto = function () {
                var options = {
                    //这些参数可能要配合着使用，比如选择了sourcetype是0，destinationtype要相应的设置
                    quality: 100,                                            //相片质量0-100
                    destinationType: Camera.DestinationType.FILE_URI,        //返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)
                    sourceType: Camera.PictureSourceType.CAMERA,             //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
                    allowEdit: false,                                        //在选择之前允许修改截图
                    encodingType: Camera.EncodingType.JPEG,                   //保存的图片格式： JPEG = 0, PNG = 1
                    targetWidth: 800,                                        //照片宽度
                    targetHeight: 800,                                       //照片高度
                    mediaType: 0,                                             //可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。
                    cameraDirection: 0,                                       //枪后摄像头类型：Back= 0,Front-facing = 1
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: true                                   //保存进手机相册
                };
                $cordovaCamera.getPicture(options).then(function (imageData) {
                    $scope.upImage(imageData);
                }, function (err) {
                    MyDialog.tip(err);
                });
            };
            $scope.upImage = function (imageUrl) {
                document.addEventListener('deviceready', function () {
                    var url = Constant.WebPath + Constant.BackendModule + '/index.php?act=goods&op=upload_image&ex_id=' + $scope.ex_id + '&platform=' + $rootScope.platform_name + '&token=' + localStorage.getItem('token') + '&store_id=' + 1714;
                    var options = { chunkedMode: false };
                    //var ft = new FileTransfer();
                    //上传进度
                    $cordovaFileTransfer.onprogress = function(progressEvent) {
                        MyDialog.showProgress(progressEvent);
                        if (progressEvent.lengthComputable) {
                            loadingStatus.setPercentage(progressEvent.loaded / progressEvent.total);
                        } else {
                            loadingStatus.increment();
                        }
                    };
                    //这里是实现多个图片上传的步骤
                    for (var i = 0; i < $scope.image_list.length; i++) {
                        if ($scope.image_list[i] != "") {
                            var imageUrl = $scope.image_list[i];
                            $cordovaFileTransfer.upload(url, imageUrl, options)
                                .then(function (result) {
                                    var data = JSON.parse(result.response);
                                    if (data.error !== undefined) {
                                        MyDialog.error("网络繁忙");
                                    }
                                    else {
                                        MyDialog.hideProgress();
                                        MyDialog.tip("发布成功", 2500);
                                        $rootScope.gotoPage('/home');
                                    }
                                }, function (err) {
                                    MyDialog.error(err);
                                }, function (progress) {
                                });
                        }
                    }

                }, false);
            };
        }])

HTML

代码分析
这里需要弄清楚几个逻辑，因为这里是多个图片上传，然后还是需要和其他信息一起提交到服务端的，所以和头像上传会有所不同，头像上传的逻辑是上传一个图片，点击头像选择后，会直接上传到服务器端，然后使用ajax刷新一下头像数据即可。但如果这里也这样做的话有点不好，因为如果每次选择图片后都要先直接传到服务器的话，那删除或重新添加等操作又要对服务器进行操作，这里其实可以分开两步，第一步先使用插件cordova-plugin-image-picker选择图片，将选择的图片存到一个数组中，双向绑定输出到页面中遍历，这里的图片并没有走服务器端，仅仅是显示选择了哪些图片，速度更快，使用这个插件注意点击的html中不要使用input标签，不然会调起键盘或其他的东西。第二步，在点击submit提交的时候，触发使用cordova-plugin-file-transfe插件来对图片的上传，上面代码中的for循环进行了多个图片异步上传。
下面是后端对图片的处理：
PHP

public function upload_imageOp(){
        $file = $_FILES["file"];
        $name = $file['name'];
        $dir=BASE_UPLOAD_PATH . DS.'tplus'.DS;
        if(!file_exists($dir))
            mkdir($dir,0777,true);  //如果没有该文件夹则创建一个
        $filename=TIMESTAMP . "_" . $name;
        $path = BASE_UPLOAD_PATH . DS.'tplus'.DS . $filename;
        if(move_uploaded_file($file['tmp_name'],$path)){
            $r=Model("ex_goods")->addData(array("pic"=>$filename,"ex_id"=>$_REQUEST['ex_id']));  //这里写入数据库的图片是处理过的名称，在读图片的时候需要进行地址的拼接处理
            if(!$r){
                echo json_encode(array("error"=>"网络繁忙"));
                exit;
            }
            echo json_encode(array("result"=>"上传成功","filename"=>$filename));
            exit;
        }else{
            echo json_encode(array("error"=>"网络繁忙"));
            exit;
        }
    }

至此，多图片上传就完成了，后面会接着写下载图片和视频播放的文章总结

大神图来一个.jpg

最后附上一个大神总结提供的关于ionic2安装插件的版本问题，复制下来作为备用，链接在这里

    ionic2_tabs
    An awesome Ionic/Cordova app.
    XXX