所以我有一些功能代码，但我需要向其中添加多个图像上传。我用了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 请求时，我还可以看到负载与商店和图像一起发送。我做错了什么？

最佳答案

我需要提供 resumeSizeUrl 或 resumeSize，以检查文件的进度。在我这样做之后，我的文件发送没有问题。

后端部分也不对。为了上传文件，我使用了 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);
}

关于php - 请求为空 laravel ajax 多张图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36015738/