后台文件上传

Posted 2023-03-29

【中文标题】后台文件上传

【英文标题】：Backand File Upload

【发布时间】：2016-04-04 17:37:42

【问题描述】：

我尝试实现Backand文件上传，但我得到这个错误：

“以下操作：“文件”未能执行：对象引用未设置为对象的实例”。

我只是从默认操作的文档中复制粘贴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();
        

【问题讨论】：

您能否将代码与有效的 codepen.io 示例进行比较：codepen.io/backand/pen/ZQaYEV

【参考方案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>