保存来自angularjs和laravel形式的数据和文件

Question

我想将AngularJS表单中的数据保存在数据库中。 我有领域的形式。 但我想另外发送带有数据的文件。 数据发送没有问题。 但我不知道如何发送文件数据。 我必须发送两个请求吗？ 如何发送文件和数据？

这是我的输入文件。

<div class="pure-control-group">
                    <label for="code">UID</label>
                    <input id="uid" ng-model="form.uid" type="text" placeholder="UID" required="" disabled="">
                </div>

            <div class="pure-control-group">
                <label for="code">Code</label>
                <input id="code" ng-model="form.code" type="text" placeholder="Code" required="">
            </div>

            <div class="pure-control-group">
                <label for="name">Name</label>
                <input id="name" ng-model="form.name" type="text" placeholder="Name" required="" autocomplete="new-password">                             
            </div>

            <div class="pure-control-group">
                <label for="town">Town</label>
                <input id="town" ng-model="form.town" type="text" placeholder="Town" required="" autocomplete="new-password">                             
            </div>

            <div class="pure-control-group">
                <label for="date_start">Date Start</label>
                <input id="date_start" ng-model="form.date_start" type="date" placeholder="Password" autocomplete="new-password">
            </div>

            <div class="pure-control-group">
                <label for="date_stop">Date Stop</label>
                <input id="date_stop" ng-model="form.date_stop" type="date" placeholder="Password" autocomplete="new-password">
            </div>

            <div class="pure-control-group">
                <label>Status</label>
                <select class="form-control select" ng-model="form.status">
                    <option ng-repeat="status in statuses" value="{{status.name}}">{{status.name}}</option>
                </select>
            </div>
<div class="pure-control-group">
                        <label for="logo">Logo</label>
                        <input id="logo" type="file" ng-model="form.logo" name="file" accept="image/*" ngf-max-size="5MB" required>
                    </div>

Angularjs控制器：

$scope.submit = function (data)
                {     
                        $fetch.post('api/admin/places', data)
                                .then(function (response)
                                {
                                    if (response.success)
                                    {
                                        Notification.success(response.message);
                                        $state.go('app.admin.places');
                                    } else
                                    {
                                        var msg = response && response.message ? response.message : 'There was an error in data update. Please contact your administrator';
                                        Notification.error(msg);
                                    }
                                })
                                .finally(function () {
                                    $loader.hide();
                                });
                    }
                };

Laravel控制器：

public function add(Request $request) {

        try {

            Place::create([
                'uid' => Uuid::generate()->string,
                'code' => $request->input('code'),
                'name' => $request->input('name'),
                'town' => $request->input('town'),
                'date_start' => $request->input('date_start'),
                'date_stop' => $request->input('date_stop'),
                'status' => $request->input('status'),
                'sort' => 1,
                'position' => $request->input('position'),
            ]);
        } catch (\Exception $ex) {

        }
        return ['success' => true, 'message' => 'Place was successfully added'];
    }

那么，如何保存文件和数据？

Answer 1

使用下面的代码通过$ post将文件升级到服务器：

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);

        var info = {
            "text":"additional info"
        };
        fd.append('data', angular.toJson(info));

        $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
        })

        .success(function(){
        })

        .error(function(){
        });
    }
}]);

希望您知道其余部分。