cordova插件$cordovaCamera + angular上传FormData类型数据

时间:2019-01-17
本文章向大家介绍cordova插件$cordovaCamera + angular上传FormData类型数据,主要包括cordova插件$cordovaCamera + angular上传FormData类型数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

首先安装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;
					}
				});
			};