如何使用 API 将 Cordova 图片上传到 Laravel 4 项目 [英] How to upload a Cordova picture to a Laravel 4 project by using an API

问题描述

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

I'm making a hybrid app with AngularJS and Cordova, using a Laravel 4 API & Backoffice. I can make a picture with the application, but it does not upload. I don't really know how to upload the picture, and i don't really know how i can troubleshoot all of it. I upload the image to the API-route i wrote, using the same upload-method as i use to do with the backoffice. This is what i have in the AngularJS-Controller, which uses Cordova to do the stuff.

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 });
    }

我在网上搜索好的教程或解释，但它们让我发疯.

I searched the web for good tutorials or explanations, but they drove me crazy.

有人可以帮我吗?

谢谢！托马斯

推荐答案

你的 Angular 控制器应该有以下功能

Your Angular controller should have the following function

$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 函数可以简单地将图像处理为:

And on your server, Laravel function could simply handle the image as:

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

不要忘记在控制器中注入 $cordovaFileTransfer.

Do not forget to inject $cordovaFileTransfer in your controller.

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

That's it, this is a simple example you can extend it.

归功于:Phonegap + Laravel 4 如何上传文件

这篇关于如何使用 API 将 Cordova 图片上传到 Laravel 4 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！