Question

我正在使用angular-file-upload指令，通过POST请求将文件上传到我的服务器，但是我感到困惑。

我的输入框设置为：<input type="file" ng-model="image['file']" ng-file-select="onFileSelect($file)" >

我将文件分配给选择的$scope.upload：

$scope.onFileSelect = function($file) {

    $scope.upload = $file;
};

现在，当我按下“上传”按钮时，我想将一些数据（$scope.image）发送到服务器，还有我上传的文件，以便我可以验证它。

我为此创建了一个Collection服务，如下所示：

    ...
    validateUpload : function( data, upload ) {
        return $http({
            method: 'POST',
            url: '/url/to/upload',
            headers: { 'Content-Type' : 'application/json' },
            data: data,
            file: upload
        });
    },
    ...

好的，现在在我的控制器中我可以尝试上传数据：

Collection.validateUpload( $scope.image, $scope.upload )
    .success(function(data) {
        console.log(data);
    });

在我的Laravel控制器中，我可以非常轻松地访问$scope.image数据：

return Input::all();

= Object {file: "C:\fakepath\myimage.png", title: "Title", source: "A Source"}

但是，我希望访问我的文件。根据{{3}}，我应该可以通过以下方式访问：

Input::file('file');

然而，它似乎根本没有抓住任何东西。例如，在此上运行->getSize()会抱怨尝试访问不是对象的内容。

任何人都知道我是如何获得该文件的？

编辑：经过一段时间的播放后，当我选择console.log($file);时，undefined，嗯。

Answer 1

试试这个：

$scope.onFileSelect = function($file) {
    $scope.upload = $file[0];
};

Answer 2

如果有帮助，我正在这样做

view.blade.php

#include <iostream>
#include <cstdlib>
using namespace std;

int main() {
float x = rand();
cout << x << endl;
return 0;
}

角度控制器

<div ng-controller="fupController">

        <input type="file" id="file1" name="file" multiple
            ng-files="getTheFiles($files)" />

        <input type="button" ng-click="uploadFiles()" value="Upload" />
    </div>

laravel 5.3的API路线

app.directive('ngFiles', ['$parse', function ($parse) {

        function fn_link(scope, element, attrs) {
            var onChange = $parse(attrs.ngFiles);
            element.on('change', function (event) {
                onChange(scope, { $files: event.target.files });
            });
        };

        return {
            link: fn_link
        }
    } ]);

    app.controller('fupController', function ($scope, $http , API_URL) {

        var formdata = new FormData();
        $scope.getTheFiles = function ($files) {
            angular.forEach($files, function (value, key) {
                formdata.append(key, value);
            });
        };

        //alert(formdata);

        // NOW UPLOAD THE FILES.
        $scope.uploadFiles = function () {

            var request = {
                method: 'POST',
                url: API_URL + 'uploadEntry',
                data: formdata,
                headers: {
                    'Content-Type': undefined
                }
            };

            // SEND THE FILES.
            $http(request)
                .success(function (d) {
                    //alert(d);
                })
                .error(function () {
                });
        }
    });

控制器

Route::post('fileupload', 'userController@fileupload');

按照此处上传多张图片

AngularJS＆amp; Laravel：上传文件＆amp;抓住服务器

2 个答案: