【发布时间】:2016-07-01 03:44:32
【问题描述】:
所以我有一些功能代码,但我需要向其中添加多个图像上传。我用this plugin。现在我的 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 请求时,我还可以看到有效负载与商店和图像一起发送。我做错了什么?
【问题讨论】:
-
浏览器控制台中是否出现内部错误 500 之类的错误?
-
不,它不会给出错误,我返回的消息填充了一个空数组:“[]”
-
在后端部分尝试
if(Request::ajax()),看看控制器中是否有任何请求。 -
它返回 false,我认为这很奇怪,因为 ajax 调用返回 false 以检查是否有 ajax 调用 @Peyman.H
-
@SjoerdDeWit 为 ajax 请求设置了
Access-Control-Allow-Origin标头吗?
标签: php angularjs laravel image-uploading ng-file-upload