返回&文件上传支持 - JSON答案

【问题标题】：Back& File Upload Support - JSON返回&文件上传支持 - JSON
【发布时间】：2016-06-09 09:43:21
【问题描述】：

我目前正在尝试使文件上传正常工作，但遇到了一个问题，即表单正在使用多部分表单数据而不是 JSON 对象上传有效负载。

Back& 只接受包含文件名和文件数据的 JSON 对象，但我不知道如何使用 ng-admin 完成此操作。

我的代码目前如下所示：

.uploadInformation( { 'url': BackandProvider.getApiUrl()+'/1/objects/action/games', 'params': {'name':'files'}, 'headers': { 'Content-Type': false }, 'data': data })

【问题讨论】：

你用的是哪个ng-admin，可能是这个：github.com/marmelab/ng-admin support JSON

标签： angularjs json backand ng-admin

【解决方案1】：

我看到你正在使用 BackandProvider 所以绕过这个你可以自己实现上传。来自Backand docs

<body class="container" ng-app="app" ng-controller="DemoCtrl" ng-init="initCtrl()">
  <h2>Backand Simple Upload File</h2>
  <br/>
  <form role="form" name="uploadForm">
    <div class="row">
        <img ng-src="" ng-show="imageUrl" />
        <input id="fileInput" type="file" accept="*/*" ng-model="filename" />
        <input type="button" value="x" class="delete-file" title="Delete file" ng-disabled="!imageUrl" ng-click="deleteFile()" />

    </div>
  </form>
</body>




  // input file onchange callback
  function imageChanged(fileInput) {

    //read file content
    var file = fileInput.files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
      upload(file.name, e.currentTarget.result).then(function(res) {
        $scope.imageUrl = res.data.url;
        $scope.filename = file.name;
      }, function(err){
        alert(err.data);
      });
    };

    reader.readAsDataURL(file);
  };

  // register to change event on input file 
  function initUpload() {
    var fileInput = document.getElementById('fileInput');

    fileInput.addEventListener('change', function(e) {
      imageChanged(fileInput);
    });
  }

   // call to Backand action with the file name and file data  
  function upload(filename, filedata) {
    // By calling the files action with POST method in will perform 
    // an upload of the file into Backand Storage
    return $http({
      method: 'POST',
      url : Backand.getApiUrl() + baseActionUrl +  objectName,
      params:{
        "name": filesActionName
      },
      headers: {
        'Content-Type': 'application/json'
      },
      // you need to provide the file name and the file data
      data: {
        "filename": filename,
        "filedata": filedata.substr(filedata.indexOf(',') + 1, filedata.length) //need to remove the file prefix type
      }
    });
  };

【讨论】：