Итак, у меня был некоторый функциональный код, но мне нужно было добавить в него несколько загрузок изображений. я использовал этот плагин. Теперь мой HTML выглядит так:
<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>
и это мой код JavaScript:
.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));
});
}
}])
И серверная часть:
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);
}
}
Но весь запрос пуст. Без части загрузки файла я мог бы добавить магазины без проблем. Я также могу видеть, как полезные данные отправляются с хранилищем и изображениями, когда я проверяю свой запрос AJAX. Что я делаю неправильно?
Мне нужно было предоставить resumeSizeUrl
или же resumeSize
, чтобы проверить прогресс файлов. После этого мои файлы отправляются без проблем.
Бэкэнд-часть тоже была не права. Для загрузки файлов я использовал класс Request laravel. Это текущий код бэкэнда:
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);
}
Других решений пока нет …