Speichern Sie Daten und Datei aus dem Formular angularjs und Laravel

Question

Ich möchte Daten aus dem Formular AngularJS in der Datenbank speichern. Ich habe Form mit Feldern. Aber ich möchte zusätzlich die Datei mit Daten senden. Daten werden ohne Probleme gesendet. Aber ich weiß nicht, wie man Datei mit Daten sendet. Ich muss zwei Anfragen senden? Wie kann ich eine Datei zusammen mit den Daten senden?

Dies ist meine Eingabedatei.

<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 Controller:

$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 Controller:

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']; 
    } 

Also, wie kann ich die Datei zusammen mit den Daten speichern?

Answer 1

den Code unten verwenden Datei zum Server über $ Beitrag uplaod: -

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(){ 
     }); 
    } 
}]); 

Hoffe, dass Sie den Rest Teil kennen.