如何使用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控制器，它使用Cordova做的东西。

  var pictureSource; // picture source 
 var destinationType; //设置返回值的格式
 
 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。发生错误！'）; 
} 
} 
 
 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; 
 
 //如果我们需要向服务器发送参数请求
 var ft = new FileTransfer（）; 
 ft.upload（fileURI，encodeURI（http://10.0.1.13/ClimbrBackoffice/public/api/routes/new/create），win，fail，options）; 
} 
 
 //成功检索照片时调用
 // 
函数onPhotoURISuccess（imageURI）{
 //取消注释以查看图像文件URI 
 // console.log（imageURI）; 
 
 //获取图像句柄
 // 
 var largeImage = document.getElementById（'largeImage'）; 
 
 //取消隐藏图片元素
 // 
 largeImage.style.display ='block'; 
 
 //显示捕获的照片
 //内联CSS规则用于调整图像大小
 // 
 largeImage.src = imageURI; 
} 
 
 //一个按钮将调用此函数
 // 
 $ scope.capturePhoto = function（）{
 //使用设备拍照相机和检索图像作为base64编码的字符串
 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 
}）; 
} 
 
 //一个按钮将调用此函数
 // 
 $ scope.getPhoto = function（source）{
 //检索图像文件来自指定源的位置
 navigator.camera.getPicture（onPhotoURISuccess，onFail，{quality：100，
 destinationType：destinationType.FILE_URI，
 sourceType：source}）; 
} 
  

我在网上搜索了很好的教程或解释，但他们让我疯狂。

有人可以帮助我吗？

谢谢！
Thomas

解决方案

您的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如何上传文件

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.

Can someone please help me out?

Thanks! Thomas

解决方案

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

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

Do not forget to inject $cordovaFileTransfer in your controller.

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

Credits to: Phonegap + Laravel 4 How to upload file

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