请求为空,laravel ajax多图。

8

我已经有了一些可用代码,但我需要添加多个图像上传功能。我使用了这个插件。现在我的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”的错误? - Peyman.H
不,它不会出现错误,我返回的消息是一个填充了空数组"[]"的消息。 - Sjoerd de Wit
在您的后端部分尝试使用 if(Request::ajax()) 来查看控制器是否收到任何请求。 - Peyman.H
它返回false,我认为这很奇怪,因为一个ajax调用正在返回false来检查是否有ajax调用@Peyman.H - Sjoerd de Wit
@SjoerdDeWit,你在Ajax请求中设置了Access-Control-Allow-Origin头吗? - Bolovsky
这是在我的 .htaccess 文件中设置的,同时这会在检查器控制台中触发一个错误。我想这可能与它被分块上传有关。因为当上传文件时,我确实收到了进度信息。只是当进度完成后,什么都没有显示出来。 - Sjoerd de Wit
1个回答

4
我需要提供resumeSizeUrlresumeSize来检查文件的进度。在我这样做后,我的文件可以顺利发送。
后端部分也有问题。为了上传文件,我使用了Laravel的Request类。这是当前的后端代码:
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);
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接