1

Backandファイルのアップロードを実装しようとしましたが、次のエラーが発生します。

「次のアクション: 「ファイル」の実行に失敗しました: オブジェクト参照がオブジェクトのインスタンスに設定されていません」.

javascriptアクションがデフォルトのドキュメントからテンプレートをコピーして貼り付けるだけです。クライアント側filenamefiledataは正しいです。サーバー側のエラーだと思いますが、理解できません。

コントローラーコード

<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();
        }
4

1 に答える 1

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>
于 2016-04-11T09:27:43.313 に答える