通过AngularJS表单获取Laravel中的文件输入值

Question

我想从laravel中的angularjs形式的文件输入中获取值，但我无法获得该值。

为什么？

angularjs：

<div ng-controller="UploadImgController" >
    <div ng-repeat="image in images">
        <img ng-src="{{image.image}}" />
    </div>
    <form ng-submit="uploadImg()" method="post" enctype="multipart/form-data">
        Select image to upload:
        <input type="file" name="path" id="path" ng-model="addimages.path" accept="image/*" app-filereader>
        <input type="text" name="propertyid" ng-model="addimages.propertyid">
        <input type="submit" value="Upload Image" name="submit" class="btn btn-primary" >
    </form>
</div>

laravel（UploadImgController.php）：

public function store()
{

    $file = Input::file('path');
    echo "file: ".$file;
}

（routes.php文件）：

Route::resource('img','UploadImgController');  

我没有价值。我该怎么办？谢谢。 ：）

Answer 1

我建议使用ng-file-upload。

视图

<button ng-file-select ng-model="myFiles" ng-file-change="upload($files)">Upload</button>

---

Angular JS

var app = angular.module('fileUpload', ['angularFileUpload']);

app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) {
        $scope.upload = function (files) {
            if (files && files.length){
                for (var i = files.length - 1; i >= 0; i--) {
                    var file = files[i];
                    $upload.upload({
                        url: '/upload',
                        fields: {key: 'value'},
                        file: file
                    })
                    .progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        console.log('File upload ' + progressPercentage + "% complete.");
                    })
                    .success(function (data, status, headers, config) {
                        console.log(data);
                    })
                    .error(function(data, status, headers, config) {
                        console.log(data);
                    });
                }
            } 
        };
    }
]);

---

Laravel Route

Route::post('upload', [
    'uses'    => 'FileUploadController@upload'
]);

Laravel控制器

public function upload() {
    $file = \Input::file('file');
    return $file;
}

Answer 2

你可以在没有插件的情况下将其关闭。我曾经遇到过类似的问题，这就是我的方法。

查看

<input type="file" name="file" onchange="angular.element(this).scope().uploadImage(this.files)"/>

Angularjs控制器

$scope.uploadavtar = function (files) {
                var fd = new FormData();
                //Take the first selected file
                fd.append("file", files[0]);

                $http.post("/upload-url" + $scope.school.profile.id, fd, {
                    withCredentials: true,
                    headers: {'Content-Type': undefined},
                    transformRequest: angular.identity
                }).then(function successCallback(response) {
                    $scope.result = response;
                    // this callback will be called asynchronously
                    // when the response is available
                }, function errorCallback(response) {
                    console.log(response);
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
            }

<强> routes.php文件

Route::post('/upload-url', 'UsersController@uploadFile');

Laravel控制器

// Upload files
    public function uploadFile(Requests\UpdateuploadfileRequest $request, $id)
    {

        $extension = Input::file('file')->getClientOriginalExtension(); 
        $fileName = time().'.'.$extension; // renameing image
        $destination = 'uploads/img'. $fileName;

        move_uploaded_file($_FILES['file']['tmp_name'], $destination);

    }
}

请求验证文件（UpdateuploadfileRequest.php）

/**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        $rules = [

        ];

        return $rules;
    }