Ionic 拍照上传 （有权限提示）
1.添加拍照插件
cordova plugin add cordova-plugin-camera
出错：根据提示执行下面脚本
cordova plugin remove --force cordova-plugin-compat
cordova plugin ls
2.重新添加拍照插件 同时添加权限插件，android 7.0 需要权限
cordova plugin add cordova-plugin-android-permissions
3.html 页面代码
<ion-view view-title="评价" hide-tabs="true" > <ion-content> <div ng-if="showloading" style="margin-top:60px; text-align: center"> <ion-spinner icon="ios" style="height: 60px; width: 60px;"></ion-spinner> </div> <div style="padding: 5px;vertical-align: middle; display: inline-block;"> <img ng-src="{{ENV.imgUrl}}{{ResponseComment.ImgUrl}}" onerror="this.src='img/ionic.png'" style="width:100px;height: 80px;vertical-align: middle;"> <span class="f18">{{ResponseComment.Conent}}</span> </div> <div class="commentimg"> <img src="img/h.png" class="stnum" ng-click="changeStarNum($event)"/> <img src="img/h.png" class="stnum" ng-click="changeStarNum($event)"/> <img src="img/h.png" class="stnum" ng-click="changeStarNum($event)"/> <img src="img/h.png" class="stnum" ng-click="changeStarNum($event)"/> <img src="img/h.png" class="stnum" ng-click="changeStarNum($event)"/> </div> <div class="list"> <label class="item item-input"> <textarea style="width:98%;height: 120px; padding: 5px;" ng-model="commentdata.Conent" placeholder="评价超过20个字可以获得银豆"></textarea> </label> <div style=" padding: 10px;"> <img src="img/zhaoxiang.png" ng-click="openCamera()" > </div> <div class="row row-wrap item-calm" > <div class="col col-50" ng-repeat="v in images"> <img ng-src="{{ENV.imgUrl}}{{v.imgUrl}}" style="width:140px;height:140px; "/> <p><button type="button" class="button button-small button-outline button-positive" ng-click="delimgs(v.imgUrl)">删除</button></p> </div> <div > </div> </div> </div> <div style="background-color: #F7F7F7; height: 40px;"> <ion-checkbox ng-model="commentdata.IsAnnoy">匿名评价</ion-checkbox> </div> </ion-content> <ion-footer-bar align-title="center" class="p_foot2" > <div class="balanced-bg" ng-click="savecommnet()">提交</div> </ion-footer-bar> </ion-view>
3.controller 代码
.controller("GoodCommentCtrl", function ($scope,$stateParams,$state,$ionicLoading,$ionicHistory,Storage,ENV,CommentFactory,$ionicScrollDelegate,SignFactory) {
$scope.showloading = true;
$scope.labMsg="";
$scope.userInfo={};
$scope.isBackbuttoning=false;
$scope.ENV=ENV;
$scope.images=[];
$scope.ordno=$stateParams.ordno;
$scope.artid=$stateParams.artid;
$scope.ogoodid=$stateParams.ogoodid;
$scope.OrderId="0";
$scope.commentdata={};
//每次加载前 判断是否登录
$scope.$on('$ionicView.beforeEnter', function () {
if (Storage.get(ENV.UserKey)) {
$scope.userInfo = Storage.get(ENV.UserKey);
} else {
$scope.userInfo = '';
}
CommentFactory.GetGoodCommentByArtilceId($scope.ordno, $scope.artid,$scope.ogoodid).then(function (data) {
var json=JSON.parse(data);
$scope.showloading =false;
$scope.ResponseComment=json.Result;
$scope.OrderId=json.Result.OrderId;
});
//$scope.images.push({imgUrl:"/upload/201707/03/d98a377a-8a18-4a41-838b-22ed22af55ee.jpg"});
// $scope.images.push({imgUrl:"/upload/201707/03/d98a377a-8a18-4a41-838b-22ed22af55ee.jpg"});
});
$scope.changeStarNum= function (e) {
if($(e.target).hasClass("stnum")){
e.target.src = 'img/hi.png';
e.target.className="";
}
else{
e.target.src = 'img/h.png';
e.target.className="stnum"
}
}
$scope.openCamera=function(){
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true
};
var permissions = cordova.plugins.permissions;
permissions.hasPermission(permissions.CAMERA, function( status ){
if ( status.hasPermission ) {
navigator.camera.getPicture(function cameraSuccess(imageUri) {
$scope.uploadimage(imageUri)
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
});
}
//上传图片
$scope.uploadimage = function(uri) {
var fileURL = uri;
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var server=encodeURI(ENV.APIUrl+"/Upload/ImgUpload");
var ft = new FileTransfer("");
$ionicLoading.show({
template: '上传中...'
});
ft.upload(fileURL, server,
function(data) {
var resp = JSON.parse(data.response);
if(resp[0].status==1){
$scope.images.push({imgUrl:resp[0].filename});
}
$ionicLoading.hide();
},
function(error) {
alert(JSON.stringify(error));
$ionicLoading.hide();
}, options);
}
$scope.delimgs=function(img){
angular.forEach($scope.images,function(data,index,arry) {
if (data.imgUrl == img) {
$scope.images.splice(img,1);
}
});
}
$scope.savecommnet=function(){
var msg ="";
if($scope.commentdata.Conent=="" || $scope.commentdata.Conent==null){
msg="请填写评价内容";
}else if($scope.commentdata.Conent.length<8){
msg="评价内容不能少于8个字";
}
else if($scope.images.length>9){
msg="评论图片最大只允许上传9张"
}
else if($(".stnum").length<1){
msg="必须选择星级"
}
if(msg==""){
var arryimg=[];
for(i in $scope.images){
arryimg.push($scope.images[i].imgUrl);
}
var comment={
"ArticleId": $scope.artid,
"OrderGoodsId": $scope.ogoodid,
"OrderId": $scope.OrderId,
"IsAnnoy": $scope.commentdata.IsAnnoy?"1":"0",
"Conent": $scope.commentdata.Conent,
"UserId": $scope.userInfo.id,
"UserName": $scope.userInfo.user_name,
"StarNum": $(".stnum").length,
"ImgUrl":arryimg.join(',')
};
CommentFactory.SaveGoodComment(comment).then(function(data){
var json=JSON.parse(data);
if(json.status==1 && $scope.commentdata.Conent.length>20){
SignFactory.SignUser( $scope.userInfo.id, $scope.userInfo.user_name,1,$scope.artid).then(function(data2) {
var json2=JSON.parse(data2);
if(json2.status==1) {
$ionicLoading.show({
noBackdrop: false,
template:"评论成功，获取"+json2.YDValue+"银豆",
duration: 1500
});
setTimeout(function () {
$ionicHistory.goBack(-1);
}, 2000);
}
});
}
else{
$ionicLoading.show({
noBackdrop: false,
template: json.msg,
duration: 1500
});
setTimeout(function () {
$ionicHistory.goBack(-1);
}, 2000);
}
});
}else{
$ionicLoading.show({
noBackdrop: false,
template: msg,
duration: 1500
});
}
}
})
4.图片展示
浙公网安备 33010602011771号