[AngularJS]请求是空 laravel ajax 多个图像

发布时间: 2017/4/16 16:07:08
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

所以我有一些运行的代码,但是我需要添加多个图像上传到它。我使用这个插件。现在我的 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 请求。我到底做错了?

解决方法 1:

提供所需 resumeSizeUrlresumeSize ,来检查文件的进度。之后我的文件发送没有问题?

后端部分不正确以及。为了上传文件,我用请求类的 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);
}
官方微信
官方QQ群
31647020