web-dev-qa-db-ja.com

Ionicカメラ/写真ライブラリからのアプリ画像のアップロード

ionicチャットアプリで作業しています。ユーザーはメッセージの一部として写真をアップロードできます。ウェブホストサーバーに画像をアップロードして取得できるようにする方法を探しています後でURL経由で。

問題は、Webサーバーにアップロードできないことです。

これら2つのプラグインを使用しています。

  • org.Apache.cordova.file-transfer
  • cordova-plugin-camera

Xcodeシミュレーターでアプリを実行し、デバイスのフォトライブラリから画像を選択すると、コンソールに次のメッセージが表示されます。

  • _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");
?>
_
ioscameraionic-frameworkfile-transferngcordova
18
user1242574

いくつか掘り下げて、たくさんのことを試した後、ようやく機能しました。

これは私が思いついたコードです：

// 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";
  }
}
?>
21
user1242574

私が会社のために作成しているアプリにも同じ問題がありました。私たちがやったことは、base64文字列としてサーバーに画像を投稿しただけです。次に、データベースから文字列を簡単に引き出して、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;
                });
            }
        };
3
Jess Patton