Angular＆amp; Loopback多形式POST无法正常工作，为什么？

时间：2014-12-21 17:33:36

标签： javascript html angularjs loopbackjs strongloop

我有一个带有存储服务的环回API后端，它存储我发送的图像和表单数据。单独测试API一切正常，因此我的控制器中的逻辑中显然缺少某些东西。我使用angular-file-upload＆amp;来自此https://github.com/strongloop/loopback-component-storage/tree/master/example-2.0

的代码

所以我基本上试图发布一个首先在API服务器上的容器中删除图像的表单，然后当我单击提交时，我试图从上传者创建的对象中提取图像名称并将其发布到其他形式的输入。

当我使用表单提交时，在控制台上我在Image属性上出现Network 422错误 - 不能为空。 DB为此属性采用字符串。

控制器 

app.controller('exampleCtrl', function($scope, $http, $resource, clientsUrl, $fileUploader, $window) {

//Code for uploading files to API - NEED TO WORK ON IT
'use strict';

// create a uploader with options
var uploader = $scope.uploader = $fileUploader.create({
  scope: $scope,                          // to automatically update the html. Default: $rootScope
  url: 'http://www.example.com:3000/api/containers/container1/upload',
  formData: [
    { key: 'value' }
  ],
  filters: [
    function (item) {                    // first user filter
      console.info('filter1');
      return true;
    }
  ]
});

// ADDING FILTERS

uploader.filters.push(function (item) { // second user filter
  console.info('filter2');
  return true;
});

// REGISTER HANDLERS

uploader.bind('afteraddingfile', function (event, item) {
  console.info('After adding a file', item);
});

uploader.bind('whenaddingfilefailed', function (event, item) {
  console.info('When adding a file failed', item);
});

uploader.bind('afteraddingall', function (event, items) {
  console.info('After adding all files', items);
});

uploader.bind('beforeupload', function (event, item) {
  console.info('Before upload', item);
});

uploader.bind('progress', function (event, item, progress) {
  console.info('Progress: ' + progress, item);
});

uploader.bind('success', function (event, xhr, item, response) {
  console.info('Success', xhr, item, response);
  $scope.$broadcast('uploadCompleted', item);
});

uploader.bind('cancel', function (event, xhr, item) {
  console.info('Cancel', xhr, item);
});

uploader.bind('error', function (event, xhr, item, response) {
  console.info('Error', xhr, item, response);
});

uploader.bind('complete', function (event, xhr, item, response) {
  console.info('Complete', xhr, item, response);
});

uploader.bind('progressall', function (event, progress) {
  console.info('Total progress: ' + progress);
});

uploader.bind('completeall', function (event, items) {
  console.info('Complete all', items);
});


$scope.load = function () {
  $http.get('http://www.example.com:3000/api/containers/container1/files').success(function (data) {
    console.log(data);
    $scope.files = data;
  });
};

$scope.delete = function (index, id) {
  $http.delete('http://www.example.com:3000/api/containers/container1/files/' + encodeURIComponent(id)).success(function (data, status, headers) {
    $scope.files.splice(index, 1);
  });
};

$scope.$on('uploadCompleted', function(event) {
  console.log('uploadCompleted event received');
  $scope.load();
});


    $scope.clientsItemsResource = $resource(clientsUrl + ":id", {id: "@id"},
            { create : { method: "POST"}, save: { method: "PUT"}}
        );

//Creates prototype for setting image on scope
function SetImageScope($scope, $window){
    $scope.image = 'Superhero';

    SetImageScope.prototype.$scope = $scope;
};

    //Sets the newClientsItem
    SetImageScope.prototype.setFile = function(element) {
        var $scope = this.$scope;
        $scope.$apply(function(){
            $scope.newClientsItem = element.files[0];
        });
    };

    $scope.createClientsItem = function (clientsItem) {

        //creates the new item
  new $scope.clientsItemsResource(clientsItem).$create().then(function (newClientsItem) {
     $scope.clientsItems.push(newClientsItem);
   });
};
});

HTML 

<div ng-controller="exampleCtrl" ng-file-drop="ng-file-drop" class="container">
<div class="row-fluid">
<div class="col-md-12"><br/></div>
<form>
  <div class="form-group">
    <label>Title</label>
    <input type="text" ng-model="newClientsItem.title" required="required" class="form-control"/><br/>
    <label>Link</label>
    <input type="url" ng-model="newClientsItem.link" required="required" class="form-control"/><br/>
    <label>Image</label>
    <input ng-file-select="ng-file-select" type="file" onchange="SetImageScope.prototype.setFile(this)" class="btn btn-primary"/>
    <table class="table">
      <thead>
        <tr>
          <th width="50%">Image</th>
          <th ng-show="uploader.isHTML5">Size</th>
          <th ng-show="uploader.isHTML5">Progress</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in uploader.queue">
          <td><strong>{{ item.file.name }}</strong></td>
          <td ng-show="uploader.isHTML5" nowrap="">
            {{
            item.file.size/1024/1024|number:2 }} MB
          </td>
          <td ng-show="uploader.isHTML5">
            <div style="margin-bottom: 0;" class="progress">
              <div role="progressbar" ng-style="{ &quot;width&quot;: item.progress + &quot;%&quot; }" class="progress-bar"></div>
            </div>
          </td>
          <td class="text-center"><span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span><span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span></td>
          <td nowrap="">
            <button type="button" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-upload"></span>Upload</button>
            <button type="button" ng-click="item.cancel()" ng-disabled="!item.isUploading" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-ban-circle"></span>Cancel</button>
            <button type="button" ng-click="item.remove()" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span>Remove</button>
          </td>
        </tr>
      </tbody>
    </table><a ng-click="createClientsItem(newClientsItem)" class="btn btn-default btn-lg">Ajouter</a>
  </div>
</form>

2 个答案:

答案 0 :(得分：0)

422状态代码表示未通过模型验证。 尝试检查客户端和服务器端的已发送数据。 使用model hooks和Loopback debug strings进行调试应该会有所帮助。

答案 1 :(得分：0)

不确定我的解决方案是否正确。但你可以考虑一下：

  1. 如果您希望将文件提交与表单提交分开，请尝试将文件<input>标记移出<form>标记。

  2. 您的代码中没有地方设置上传的'multipart'数据类型。这可能会导致问题。

相关问题
最新问题