cordova插件$cordovaCamera + angular上传FormData类型数据
程序员文章站
2022-04-08 16:41:54
...
首先安装cordovaCamera 插件就不说了,(cordova plugin add cordova-plugin-camera)
service
.service("CameraService", ["$q", "$cordovaCamera", function (a, b) {
return {
startCamera: function (allowEdit, isBase64) {
return b.getPicture({
quality: allowEdit ? 100 : 75, // 图片质量,0-100
allowEdit: allowEdit, // 选择图片前,是否允许编辑
// 返回值格式:DATA_URL,返回作为base64编码字符串;FILE_URL,返回图像的URL;NATIVE_RUL,返回图像本机URL
destinationType: isBase64 ? Camera.DestinationType.DATA_URL : Camera.DestinationType.FILE_URI,
// 从相册选取图片
sourceType: Camera.PictureSourceType.CAMERA,
// 设置缩略图的宽高
targetWidth: 800,
targetHeight: 800,
width: 800, // 筛选宽度:如果宽度为0,返回所有尺寸的图片
height: 800, // 筛选高度:如果高度为0,返回所有尺寸的图片
maximumImagesCount: 10, // 最大选择图片数量
})
},
openCameraRoll: function (allowEdit, targetWidth, targetHeight, isBase64) {
return b.getPicture({
quality: allowEdit ? 100 : 75,
allowEdit: allowEdit,
destinationType: isBase64 ? Camera.DestinationType.DATA_URL : Camera.DestinationType.FILE_URI,
// 调动相机获取图片
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
// 设置宽高
targetWidth: targetWidth ? targetWidth : 800,
targetHeight: targetHeight ? targetHeight : 800,
// saveToPhotoAlbum:true, // 是否保存到相册,
// correctOrientation:true // 设置摄像机拍摄的图像是否为正确的方向
})
},
cleanup: function () {
return b.cleanup();
}
}
}])
controller
根据url读取图片
// 上传相片
var uploadPhoto = function (imageURI) {
lbSpinnerDialog.show();
var fileName = new Date().getTime()+ '.jpg';
// form表单上传图片
var formData = new FormData();
// 根据$cordovaCamera返回的路径读取图片 TODO:相机图片的兼容
$window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
var the_file = new Blob([e.target.result ], { type: "image/jpeg" } );
formData.append("media", the_file, fileName);
// 提交数据,这里默认post请求,设置contenttype为undefined,transformRequest 为 angular.identity
psisServices.fullPathPostEncode(ServerConfig.cloudServer + "/xlfd/card/uploadTemporaryMaterial.ac", formData, {
headers: {'Content-Type': undefined},
transformRequest: angular.identity
})
.success(function (result) {
if (result.resultCode === 1) {
if ($scope.imgIndex === 1) {
$scope.weChatMemberCardConfig.wxCardInfo.protocol = result.resultObject
} else if ($scope.imgIndex === 2) {
$scope.weChatMemberCardConfig.wxCardInfo.agreementMediaId = result.resultObject
} else {
$scope.weChatMemberCardConfig.wxCardInfo.operatorMediaId = result.resultObject
}
Tools.toastShow("图片上传成功!");
}
lbSpinnerDialog.hide();
})
.error(function () {
lbSpinnerDialog.hide();
Tools.toastShow("图片上传失败!");
})
};
reader.readAsArrayBuffer(file);
}, function(e){
console.log(e);
});
}, function(e){
console.log(e);
});
};
选择图片或者拍照
// 选择图片
$scope.choosePhoto = function (indexCode) {
$scope.imgIndex = indexCode;
$ionicActionSheet.show({
buttons: [{
text: '<i class="icon ion-camera positive"></i> 拍 照'
}, {
text: '<i class="icon ion-images positive"></i> 从相册中选择'
}],
buttonClicked: function (index) {
switch (index) {
case 0:
CameraService.startCamera(false).then(uploadPhoto);
break;
case 1:
CameraService.openCameraRoll(false, false, false).then(uploadPhoto);
break;
}
return true;
}
});
};
上一篇: 一个表单提交数据和上传图片(ssm)
下一篇: 利用mongodb修改一个带有图片的数据