从相机/照片库上载离子应用程序图像
我正在开发离子聊天应用程序，用户可以将照片作为其消息的一部分进行上传。 我正在寻找一种方法将图像上传到我的虚拟主机服务器，以便以后通过URL检索。
问题是，我无法将其上传到我的networking服务器。
我正在使用这两个插件：
- org.apache.cordova.file转移
- cordova – 插件相机
当我在Xcode模拟器中运行应用程序，并从设备photolibrary中select一张图片时，控制台给我以下消息：
File Transfer Finished with response code 200-
void SendDelegateMessage(NSInvocation *): delegate (webView:runJavaScriptAlertPanelWithMessage:initiatedByFrame:) failed to return after waiting 10 seconds. main run loop mode: kCFRunLoopDefaultMode> -
SUCCESS: ""
这是我目前使用的代码：
app.controller('HomeController', function($rootScope, $scope, $cordovaCamera, $ionicActionSheet, $cordovaFileTransfer){ ... // open PhotoLibrary $scope.openPhotoLibrary = function() { var options = { quality: 100, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, allowEdit: true, encodingType: Camera.EncodingType.JPEG, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { //console.log(imageData); //console.log(options); var url = "http://mydomein.com/upload.php"; //target path may be local or url var targetPath = imageData; var filename = targetPath.split("/").pop(); var options = { fileKey: "file", fileName: filename, chunkedMode: false, mimeType: "image/jpg" }; $cordovaFileTransfer.upload(url, targetPath, options).then(function(result) { console.log("SUCCESS: " + JSON.stringify(result.response)); alert("success"); alert(JSON.stringify(result.response)); }, function(err) { console.log("ERROR: " + JSON.stringify(err)); alert(JSON.stringify(err)); }, function (progress) { // constant progress updates $timeout(function () { $scope.downloadProgress = (progress.loaded / progress.total) * 100; }) }); }, function(err) { // error console.log(err); }); }
这是我的upload.php文件：
<?php // move_uploaded_file($_FILES["file"]["tmp_name"], $cwd . '/files/images/'); move_uploaded_file($_FILES["file"]["tmp_name"], "/files/images"); ?>
经过一番挖掘和尝试，我终于搞定了。
这是我想出的代码：
// open PhotoLibrary $scope.openPhotoLibrary = function() { var options = { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY, allowEdit: true, encodingType: Camera.EncodingType.JPEG, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function(imageData) { //console.log(imageData); //console.log(options); var image = document.getElementById('tempImage'); image.src = imageData; var server = "http://yourdomain.com/upload.php", filePath = imageData; var date = new Date(); var options = { fileKey: "file", fileName: imageData.substr(imageData.lastIndexOf('/') + 1), chunkedMode: false, mimeType: "image/jpg" }; $cordovaFileTransfer.upload(server, filePath, options).then(function(result) { console.log("SUCCESS: " + JSON.stringify(result.response)); console.log('Result_' + result.response[0] + '_ending'); alert("success"); alert(JSON.stringify(result.response)); }, function(err) { console.log("ERROR: " + JSON.stringify(err)); //alert(JSON.stringify(err)); }, function (progress) { // constant progress updates }); }, function(err) { // error console.log(err); }); }
以及域服务器上的upload.php中的代码：
<?php // if you want to find the root path of a folder use the line of code below: //echo $_SERVER['DOCUMENT_ROOT'] if ($_FILES["file"]["error"] > 0){ echo "Error Code: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Uploaded file: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kilobytes<br />"; if (file_exists("/files/".$_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. No joke-- this error is almost <i><b>impossible</b></i> to get. Try again, I bet 1 million dollars it won't ever happen again."; } else { move_uploaded_file($_FILES["file"]["tmp_name"],"/var/www/vhosts/yourdomain.com/subdomains/domainname/httpdocs/foldername/images/".$_FILES["file"]["name"]); echo "Done"; } } ?>
我为公司build立的应用程序也有同样的问题，我们只是把图像以base64stringforms发布到我们的服务器上。 然后，您可以简单地从数据库中拉出string，并显示在一个div。 我们使用了NgCordova相机，然后只传入takePhoto函数中的数据。
$scope.takePhoto = function () { $ionicScrollDelegate.scrollTop(); console.log('fired camera'); $scope.uploadList = false; $ionicPlatform.ready(function() { var options = { quality: 100, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: false, encodingType: Camera.EncodingType.PNG, targetWidth: 800, targetHeight: 1100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false }; $cordovaCamera.getPicture(options).then(function (imageData) { $ionicLoading.show({ template: 'Processing Image', duration: 2000 }); $scope.image = "data:image/png;base64," + imageData; if (ionic.Platform.isAndroid() === true) { $scope.Data.Image = LZString.compressToUTF16($scope.image); $scope.Data.isCompressed = 1; } else { $scope.Data.Image = $scope.image; $scope.Data.isCompressed = 0; } if ($scope.tutorial) { $scope.showAlert("Instructions: Step 3", '<div class="center">Now that you have taken a photo of the POD form, you must upload it to the server. Press the upload doc button in the bottom right of the screen.</div>'); } $scope.on('') }, function (err) { console.log(err); }); }, false); }; $scope.UploadDoc = function () { var req = { method: 'POST', url: ffService.baseUrlAuth + 'cc/upload', headers: { 'x-access-token': ffService.token }, data: $scope.Data }; if ($scope.Data.Image === null || $scope.Data.Value === '') { $scope.showAlert("Uh Oh!", '<div class="center">Please take a photo of your document before attempting an upload.</div>'); } else { $http(req).success(function (data, status, headers, config) { localStorage.setItem('tutorial', false); $scope.tutorial = false; $scope.getUploads($scope.PODOrder.OrderNo); $scope.showAlert("Success!", '<div class="center">Your Document has been successfully uploaded!</div>'); $scope.uploadList = true; }).error(function (data, status, headers, config) { $rootScope.$broadcast('loading:hide'); $scope.showAlert("Something went wrong!", '<div class="center">Please make sure you have an internet connection and try again.</div>'); }).then(function(data, status, headers, config){ $scope.Data.Image = null; }); } };