后台文件上传

Question

我尝试执行 Backand 文件上传，但出现此错误：

"The following action: "files" failed to perform: Object reference not set to an instance of an object".

我只是从文档中复制粘贴 javascript 模板，该操作是默认操作。在客户端 filename 和 filedata 是正确的，我认为这是服务器端错误，但我无法理解。

控制器代码

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-init="pets.initCtrl()">
    <form role="form" name="uploadForm">
        <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()" />
    </form>
</div>

        // Display the image after upload
        self.imageUrl = null;

        // Store the file name after upload to be used for delete
        self.filename = null;

        // 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) {
              self.imageUrl = res.data.url;
              self.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 : 'https://api.backand.com/1/objects/action/fotos',
            params:{
              name: 'files'
            },
            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
            }
          });
        };

        self.deleteFile = function(){
          if (!self.filename){
            alert('Please choose a file');
            return;
          }
          // By calling the files action with DELETE method in will perform
          // a deletion of the file from Backand Storage
          $http({
            method: 'DELETE',
            url : baseActionUrl +  objectName,
            params:{
              "name": filesActionName
            },
            headers: {
              'Content-Type': 'application/json'
            },
            // you need to provide the file name
            data: {
              "filename": self.filename
            }
          }).then(function(){
            // Reset the form
            self.imageUrl = null;
            document.getElementById('fileInput').value = "";
          });
        }

        self.initCtrl = function() {
          initUpload();
        }

Answer 1

我已经找出问题所在，html 模板是否仍在使用范围而不是控制器作为控件

<div class="w3-col l12" ng-init="pets.initCtrl()">
 <form role="form" name="uploadForm">
  <div class="w3-row">
   <img ng-src="{{pets.imageUrl}}" ng-show="pets.imageUrl" />
   <input class="w3-input" id="fileInput" type="file" accept="*/*" ng-model="pets.filename" />
   <input type="button" value="x" class="delete-file" title="Delete file" ng-disabled="!pets.imageUrl" ng-click="pets.deleteFile()" />
  </div>
 </form>
</div>

后台文件上传

Backand File Upload

file-upload

backand