Anfrage ist leer Laravel Ajax mehrere Bilder

Question

So hatte ich einige funktionierende Code, aber ich musste mehrere Bild-Uploads hinzufügen. Ich habe this plugin verwendet. Nun ist mein HTML sieht wie folgt aus:

<form class="form-horizontal full-width pull-left m-t-20" name="myForm" ng-if="showForm"> 
    <div class="form-group"> 
     <label for="Naam" class="col-sm-3 control-label">Naam</label> 
     <div class="col-sm-9"> 
     <input type="text" class="form-control" id="Naam" ng-model="addForm.name" placeholder="Naam"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="imageselect col-sm-3"> 
     Afbeeldingen 
     <input type="file" ngf-select ng-model="files" ngf-multiple="true" accept="image/*" /> 
     Drop afbeeldingen: <div ngf-drop ng-model="files" class="drop-box">Drop</div> 
     </div> 
     <div class="col-sm-9"> 
     <div ng-repeat="file in files" class="imagepreview"> 
      <img ng-show="myForm.file.$valid" ngf-thumbnail="file" class="thumb"><br /> <button ng-click="file = null" class="thumbremove" ng-show="file">Verwijder</button> 
     </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <span class="progress" ng-show="files.progress >= 0"> 
     <div style="width:<<files.progress>>%" ng-bind="files.progress + '%'"></div> 
     </span> 
     <div class="col-sm-10"> 
     <button type="submit" ng-click="addStore(files)" class="btn btn-default">Opslaan</button> 
     </div> 
    </div> 
</form> 

und das ist mein Javascript-Code:

.controller('StoresController', ['$scope', '$http', 'handlerService', 'Upload', '$timeout', function($scope, $http, handlerService, Upload, $timeout) { 
    $scope.model = {}; 
    $scope.model.stores = stores; 
    $scope.showForm = true; 
    $scope.addForm = {}; 
    $scope.addForm.name = ''; 

    $scope.addStore = function(files) { 
    $scope.showForm = true; 
    files.upload = Upload.upload({ 
    method: 'POST', 
    url: 'http://localhost:8000/stores/add/', 
    data: {store : $scope.addForm, files: files}, 
    }); 

    files.upload.then(function (res) { 
     $timeout(function() { 
     handlerService.isValid(res.data); 
     if(res.data.isValid == true) { 
      $scope.showForm = false; 
      $scope.addForm = {}; 
     } 
     }); 
    }, function (response) { 
     if (response.status > 0) 
     $scope.errorMsg = response.status + ': ' + response.data; 
     }, function (evt) { 
     // Math.min is to fix IE which reports 200% sometimes 
     files.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
    }); 
    } 

}]) 

Und das Back-End-Teil:

namespace App\Http\Controllers; 
use Illuminate\Http\Request; 
use App\Http\Requests; 
use DB; 

class StoresController extends Controller 
{ 
    public function add(Request $request) { 
     $files = array(); 
     foreach($_FILES as $file) { 
     $filename = $file['name']; 
     $files[] = $file['name']; 
     $destination = '../public/assets/img/stores/' . $filename; 
     move_uploaded_file($file['tmp_name'] , $destination); 
     } 
     $store = $request->store; 
     $store['images'] = json_encode($files); 
     $isValid = false; 
     if(isset($store['name']) && $store['name'] != '') { 
     DB::table('stores')->insert(
      $store 
     ); 
     $isValid = true; 
     $message = 'store is added.'; 
     } else { 
     $message = json_encode($request->all()); 
     $isValid = false; 
     } 

     $result = [ 
     'isValid' => $isValid, 
     'message' => $message 
     ]; 
     return json_encode($result); 
    } 
} 

Aber die gesamte Anfrage ist leer. Ohne den Datei-Upload-Teil könnte ich Geschäfte problemlos hinzufügen. Ich kann auch sehen, dass die Payload mit Speicher und Bildern gesendet wird, wenn ich meine AJAX-Anfrage überprüfe. Was mache ich falsch?

Answer 1

Ich musste resumeSizeUrl oder resumeSize bereitstellen, um den Fortschritt der Dateien zu überprüfen. Nachdem ich das gemacht habe, senden meine Dateien ohne Probleme.

Der Backend-Teil war auch nicht richtig. Um die Dateien hochzuladen, habe ich die Request-Klasse von Laravel verwendet. Dies ist der aktuelle Back-End-Code:

public function add(Request $request) { 
    $isValid = true; 

    DB::beginTransaction(); 
    $store = $request->store; 
    if(isset($store['name']) && $store['name'] != '') { 
    $id = DB::table('stores')->insertGetId(
     $store 
    ); 
    } else { 
    $message = 'Naam mag niet leeg zijn'; 
    $isValid = false; 
    } 

    if($isValid === true) { 
    // getting all of the post data 
    $files = $request->file('files'); 
    // Making counting of uploaded images 
    $path = 'stores'.'/'.$id; 
     $file_count = count($files); 
     // start count how many uploaded 
     $uploadcount = 0; 
     foreach($files as $file) { 
     $rules = array('file' => 'mimes:png,gif,jpeg'); //'required|txt,pdf,doc' 
     $validator = Validator::make(array('file'=> $file), $rules); 
     if($validator->passes()) { 
      $destinationPath = 'img/'.$path.'/'; 
      $filename = $file->getClientOriginalName(); 
      $upload_success = $file->move($destinationPath, $filename); 
      $uploadcount ++; 
     } else { 
      $message = 'Alleen afbeeldingen zijn toegestaan'; 
      $isValid = false; 
     } 
     } 
     if($isValid == true) { 
     if($uploadcount != $file_count) { 
      $message = 'Niet alle bestanden zijn geupload'; 
      $isValid = false; 
     } 
     } 
    } 

    if($isValid == true) { 
    DB::commit(); 
    $message = 'Store Toegevoegd!'; 
    } 
    if($isValid == false) { 
    DB::rollBack(); 
    } 

    $result = [ 
    'isValid' => $isValid, 
    'message' => $message 
    ]; 

    return json_encode($result); 
}