日常开头图片系列
插件的使用，主要有以下几个重要步骤：
- 首先安装插件，对应的版本号要明确
- 在config.xml中加上对应的插件名称和版本号
- 然后删除之前的项目工程，
ionic platform rm android - 再新建项目工程，
ionic platform add android - 打包debug包，
ionic build android - 打包正式包，
ionic build android --prod --release - 进入项目工程目录下，
cd platformscd 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