如何使用 API 将 Cordova 图片上传到 Laravel 4 项目

Question

我正在使用 Laravel 4 API 和 Backoffice 制作一个包含 AngularJS 和 Cordova 的混合应用程序。 我可以使用该应用程序制作图片，但无法上传。我真的不知道如何上传图片，我真的不知道如何解决所有问题。 我将图像上传到我编写的 API 路由，使用与后台相同的上传方法。这就是我在 AngularJS-Controller 中所拥有的，它使用 Cordova 来做这些事情。

var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;

    function clearCache() {
        navigator.camera.cleanup();

    }
    var retries = 0;
    function onPhotoDataSuccess(fileURI) {

        var win = function (r) {
            clearCache();
            retries = 0;
            alert('Done!');
        }

        var fail = function (error) {
            if (retries == 0) {
                retries ++
                setTimeout(function() {
                    onPhotoDataSuccess(fileURI)
                    alert("kgoa ne keer opnief beginne");
                }, 1000)
            } else {
                retries = 0;
                clearCache();
                alert('Ups. Something wrong happens!');
            }
        }

        var options = new FileUploadOptions();
        options.fileKey = "image";
        options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
        options.mimeType = "image/jpeg";
        options.params = {};

        params.value1 = "test";
        params.value2 = "param";

     // if we need to send parameters to the server request
        var ft = new FileTransfer();
        ft.upload(fileURI, encodeURI("http://10.0.1.13/ClimbrBackoffice/public/api/routes/new/create"), win, fail, options);
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
        // Uncomment to view the image file URI
        // console.log(imageURI);

        // Get image handle
        //
        var largeImage = document.getElementById('largeImage');

        // Unhide image elements
        //
        largeImage.style.display = 'block';

        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        largeImage.src = imageURI;
    }

    // A button will call this function
    //
    $scope.capturePhoto = function(){
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
            quality : 100,
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.CAMERA,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 250,
            targetHeight: 400,
            saveToPhotoAlbum: true,
            correctOrientation: true
        });
    }

    // A button will call this function
    //
    $scope.getPhoto = function(source) {
        // Retrieve image file location from specified source
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 100,
            destinationType: destinationType.FILE_URI,
            sourceType: source });
    }

我在网上搜索了很好的教程或解释，但它们把我逼疯了。

有人可以帮帮我吗？

谢谢！ 托马斯

Answer 1

您的 Angular 控制器应具有以下功能

$scope.upload = function() {
var options = {
    fileKey: "file",
    fileName: "image.png",
    chunkedMode: false,
    mimeType: "image/png"
};
$cordovaFileTransfer.upload("http://yourdomain.com/image_handler", "/android_asset/www/img/ionic.png", options).then(function(result) {
    console.log("SUCCESS: " + JSON.stringify(result.response));
    $scope.showAlert('Done', 'File Uploaded');
}, function(err) {
    console.log("ERROR: " + JSON.stringify(err));
    $scope.showAlert('Error', err);
}, function (progress) {
    // constant progress updates
});}

在你的服务器上，Laravel 函数可以简单地将图像处理为：

    public function getImageFromDevice(){
         $destinationPath = 'uploads/';
         $newImageName='MyImage.jpg';
         Input::file('file')->move($destinationPath,$newImageName);
    }

不要忘记在你的控制器中注入$cordovaFileTransfer。

就是这样，这是一个可以扩展的简单示例。

致谢：Phonegap + Laravel 4 How to upload file