将base64字符串传递给对象'；AngularJS中的s属性

我试图通过一个输入字段上传一个图像，将图像的base64绑定到一个变量，然后将该变量添加到一个对象的属性中，这样我就可以将它存储在Firebase数据库中

对象的输入表单和字段：

      <div class="row modalDetail">
              <h3>New Episode</h3>
              <table class="">
                <tbody>
                  <tr>
                    <td class="labelField">Name</td>
                    <td><input type='text' ng-model='episode.name'></td>
                  </tr>
                  <tr>
                    <td class="labelField">Title</td>
                    <td><input type='text' ng-model='episode.title'></td>
                  </tr>
                  <tr>
                    <td class="labelField">Description</td>
                    <td><input type='text' ng-model='episode.shortDescription'></td>
                  </tr>
                  <tr>
                    <td class="labelField">Time</td>
                    <td><input type='text' ng-model='episode.time'></td>
                  </tr>
                </tbody>
              </table>
              <img src="../images/placeholder.png" id="pano">

              <!-- START Image File Upload -->        
                <td class="labelField">Image</td>
                <span class="btn btn-default btn-file">
                  <input type="file" accept="image/*" capture="camera" id="file-upload">
                </span>
                <div id="spin"></div>

              <div class='btn btn-warning' ng-click='createEpisode()'> Create an Episode</div>
      </div>

具有图像文件处理等功能的控制器：

'use strict';

app.controller('UploadCtrl', ['$scope', 'Uploader', function ($scope, Uploader) {

$scope.episodes = Uploader.all;

$scope.createEpisode = function(){
    Uploader.create($scope.episode).then(function(data){
        $scope.episode.name = '';
        $scope.episode.title = '';
        $scope.episode.description = '';
        $scope.episode.time = '';
        $scope.episode.img1 = $scope.episodeImgData;
    });
};

$scope.deleteEpisode = function(episodeId){
    bootbox.confirm('Are you sure you want to delete this episode?', function(result) {
        if (result === true) { 
            Uploader.delete(episodeId).then(function(data){
                console.log('Episode successfully deleted!');
            });
        }
    });
};

$scope.updateEpisode = function(episode) {
    Uploader.update($scope.episode).then(function(data) {
        console.log(episode);
        console.log('Episode successfully updated.');
    });
};

$scope.selectEpisode = function(object) {
    $scope.selectedEpisode = object;
    setTimeout(function(){ $scope.$apply($scope.selectedEpisode = object); });
};

// ********************************************************************************** //
// START Image Upload: https://github.com/firebase/firepano/blob/gh-pages/firepano.js //
// REQUIRED: app/scripts/js/crypto.js in index.js
var spinner = new Spinner({color: '#ddd'});
$scope.episodeImgData = '../images/defaultplaceholder.png';

function handleFileSelectAdd(evt) {
  var f = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
        var filePayload = e.target.result;
        var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));

        $scope.episodeImgData = e.target.result; 

        document.getElementById('pano').src = $scope.episodeImgData; 
        console.log($scope.episodeImgData);
    };
  })(f);
  reader.readAsDataURL(f);
}

function handleFileSelectEdit(evt) {
  var f = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
        var filePayload = e.target.result;
        var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));

        $scpope.episodeImgData = e.target.result; 

        document.getElementById('pano2').src = $scope.episodeImgData; 
        $scope.selectedEpisode.img1 = $scope.episodeImgData;
        console.log($scope.episodeImgData);
    };
  })(f);
  reader.readAsDataURL(f);
}

$(function() {
    $('#spin').append(spinner);
    document.getElementById('file-upload').addEventListener('change', handleFileSelectAdd, false);  
    document.getElementById('file-upload2').addEventListener('change', handleFileSelectEdit, false); 

});
// END Image Upload: https://github.com/firebase/firepano/blob/gh-pages/firepano.js //
// ******************************************************************************** //
}]);

表单中的所有属性都保存到数据库中，img1除外。单击update按钮时，我想我可以将episodeImgData传递给要保存的对象（img1变量），但它根本不保存任何内容（只保存与Spidence.name绑定的表单变量，等等）。最好的方法是什么？我使用FirePano示例（）的一部分进行图像处理

更新（20160519）：Firebase刚刚发布了一项新功能，名为。这允许您将图像和其他非JSON数据上载到专用存储服务。我们强烈建议您使用它来存储图像，而不是将它们作为base64编码的数据存储在JSON数据库中

这段代码有很多小问题

• 由于您的剧集是一个数组，您可以使用

  $asArray

  创建is，否则它将没有

  $add

  方法：

  var剧集=$firebase（ref）。$asArray（）

• 在将数据发送到服务器之前，您正在调用

  location.reload（）

• 你的文件上传处理程序没有为我触发
• 有很多人提到了来自firepano的spinner

我认为前两个是最大的。但是，如果你不提供一个再现问题的最小示例，就很难找到这种类型的问题。我现在是为你做的

最后，代码不是太大，所以我将在这里分享：

var app = angular.module('myapp', ['firebase'])
.service('Uploader', function($firebase) {
  var ref = new Firebase('http://<yourfirebase>.firebaseio.com/');
  var episodes = $firebase(ref).$asArray();
  return {
    all: episodes,
    create: function(episode) {
      //Add to firebase db
      return episodes.$add(episode);
    }
  };
})
.controller('UploadCtrl', function ($scope, Uploader) {
  $scope.episodes = Uploader.all;
  $scope.createEpisode = function() {
    if ($scope.episodeImgData) {
      $scope.episode.img1 = $scope.episodeImgData;
    }
    Uploader.create($scope.episode);
  };
  $scope.handleFileSelectAdd = function(evt) {
    var f = evt.target.files[0];
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var filePayload = e.target.result;
        $scope.episodeImgData = e.target.result; 
        document.getElementById('pano').src = $scope.episodeImgData; 
      };
    })(f);
    reader.readAsDataURL(f);
  };
  document.getElementById('file-upload').addEventListener('change', $scope.handleFileSelectAdd, false);
});

var-app=angular.module（'myapp'，['firebase']））
.service（'Uploader'，函数（$firebase）{
var ref=新的Firebase（'http://.firebaseio.com/');
变量集=$firebase（ref）。$asArray（）；
返回{
所有：剧集，
创建：功能（插曲）{
//添加到firebase数据库
返回剧集。$add（剧集）；
}
};
})
.controller（'UploadCtrl'，函数（$scope，Uploader）{
$scope.scents=Uploader.all；
$scope.CreateSeption=函数（）{
if（$scope.eposodeimgdata）{
$scope.eposition.img1=$scope.eposodeimgdata；
}
创建（$scope.eption）；
};
$scope.handleFileSelectAdd=函数（evt）{
var f=evt.target.files[0]；
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
var filePayload=e.target.result；
$scope.eposodeimgdata=e.target.result；
document.getElementById（'pano'）.src=$scope.eposodeimgdata；
};
})（f） )；
reader.readAsDataURL（f）；
};
document.getElementById（'file-upload'）.addEventListener（'change'，$scope.handleFileSelectAdd，false）；
});

相应的（正文）HTML：

新篇章
名称
标题
描述
时间
形象
创作一集

---

如果创建一个包含可选图像数据的插曲，这是一个有效的演示：。

我认为这可能会发生，因为我通过ng模型绑定每个属性，在表单中添加了一个新插曲，但我不会在输入字段中这样做。你能上传一个二进制文件而不需要所有其他内容吗？这是Firepano的一个更为精简的版本：我相信是这样，我面临的主要问题是，我上传的任何格式在保存到Firebase时都没有绑定到事件对象。我通过在输入字段中调用ng model将其他属性与之绑定，但我正在尝试为图像字段找到一种方法，因为它是在控制器而不是视图中处理的。在您的示例中，它使用处理程序中的文件设置对象，但我需要将该数据传输到我的Uploader服务，以便可以同时完成所有操作。如果有道理的话。你能设置一个显示你的问题的bin/fiddle，然后最小化到问题本身吗？相关：$asArray是我一直想使用的东西，但我使用Firebase中的生成器angularfire（）在我的项目中实现了angularfire，它使用的是angularfire v0.6.0。我已经尝试过迁移到0.8.0，但是我遇到了很多问题。如果您有问题，只需创建该问题的最小副本，并在问题和提琴或箱子中共享代码/数据/html。这将使帮助你变得更容易。

var app = angular.module('myapp', ['firebase'])
.service('Uploader', function($firebase) {
  var ref = new Firebase('http://<yourfirebase>.firebaseio.com/');
  var episodes = $firebase(ref).$asArray();
  return {
    all: episodes,
    create: function(episode) {
      //Add to firebase db
      return episodes.$add(episode);
    }
  };
})
.controller('UploadCtrl', function ($scope, Uploader) {
  $scope.episodes = Uploader.all;
  $scope.createEpisode = function() {
    if ($scope.episodeImgData) {
      $scope.episode.img1 = $scope.episodeImgData;
    }
    Uploader.create($scope.episode);
  };
  $scope.handleFileSelectAdd = function(evt) {
    var f = evt.target.files[0];
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var filePayload = e.target.result;
        $scope.episodeImgData = e.target.result; 
        document.getElementById('pano').src = $scope.episodeImgData; 
      };
    })(f);
    reader.readAsDataURL(f);
  };
  document.getElementById('file-upload').addEventListener('change', $scope.handleFileSelectAdd, false);
});

<body ng-app='myapp'>
  <div class="row modalDetail" ng-controller='UploadCtrl'>
    <h3>New Episode</h3>
    <table class="" ng-model='episode'>
      <tbody>
        <tr>
          <td class="labelField">Name</td>
          <td><input type='text' ng-model='episode.name'></td>
        </tr>
        <tr>
          <td class="labelField">Title</td>
          <td><input type='text' ng-model='episode.title'></td>
        </tr>
        <tr>
          <td class="labelField">Description</td>
          <td><input type='text' ng-model='episode.shortDescription'></td>
        </tr>
        <tr>
          <td class="labelField">Time</td>
          <td><input type='text' ng-model='episode.time'></td>
        </tr>
      </tbody>
    </table>

    <td class="labelField">Image</td>
    <span class="btn btn-default btn-file">
      <input type="file" accept="image/*" capture="camera" id="file-upload">
    </span>
    <div class='btn btn-warning' ng-click='createEpisode()'>Create an Episode</div>
    <br/>
    <img id="pano">

  </div>
</body>