欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
					}
				});
			};
相关标签: 图片上传