错误：Firebase.set 失败：第一个参数在属性“achv_img”中包含未定义答案

【问题标题】：Error: Firebase.set failed: First argument contains undefined in property 'achv_img'错误：Firebase.set 失败：第一个参数在属性“achv_img”中包含未定义
【发布时间】：2015-11-06 03:00:55
【问题描述】：

我关注了this post

使用 angular 和 firebase achievementsapp.firebaseapp.com 的表单，您可以注册，然后如果您点击绿色加号它应该弹出表单，上传按钮不起作用，当点击添加按钮时它给我这个错误 错误：Firebase.set 失败：第一个参数在属性“achv_img”中包含未定义

控制器代码：

myApp.controller('MeetingsController',
  function($scope, $rootScope, $firebase, Uploader,
    CountMeetings, FIREBASE_URL) {

  var ref = new Firebase(FIREBASE_URL + '/users/' + 
    $rootScope.currentUser.$id + '/meetings');

  var meetingsInfo = $firebase(ref);
  var meetingsObj = meetingsInfo.$asObject();

  meetingsObj.$loaded().then(function(data) {
    $scope.meetings = data;
  }); //make sure meetings data is loaded

  $scope.addMeeting = function() {
    meetingsInfo.$push({
      name: $scope.meetingname,
      description: $scope.meetingdescription,
      achv_type: $scope.achvtype,
      achv_date: $scope.achvdate,
      achv_img : $scope.achvimg,
      date: Firebase.ServerValue.TIMESTAMP
    }).then(function() {
      $scope.meetingname='';
      $scope.achvtype = '';
      $scope.meetingdescription='';
      $scope.achvdate='';
      $scope.achvimg= $scope.meetingsInfoImgData;
    });
    Uploader.create($scope.meetingsInfo);


  $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.meetingsInfoImgData = e.target.result; 
        document.getElementById('pano').src = $scope.meetingsInfoImgData; 
      };
    })(f);
    reader.readAsDataURL(f);
  };
  document.getElementById('file-upload').addEventListener('change', $scope.handleFileSelectAdd, false);


  }; //addmeeting

  $scope.deleteMeeting = function(key) {
    meetingsInfo.$remove(key);
  }; //deleteMeeting

}); //MeetingsController

【问题讨论】：

下面有一些帮助。请注意，StackOverflow 是一个众所周知的低效调试服务。如果您仍然卡住，请考虑在 jsfiddle/jsbin 中设置最小复制（就像我在回答您链接到的问题时创建的那样）并发布该 URL。

标签： javascript angularjs file-upload firebase uploader

【解决方案1】：

在reader.onload()中，你从文件中取出图像数据并将其放入$scope.meetingsInfoImgData：

reader.onload = (function(theFile) {
  return function(e) {
    var filePayload = e.target.result;
    $scope.meetingsInfoImgData = e.target.result; 
    document.getElementById('pano').src = $scope.meetingsInfoImgData; 
  };
})(f);

然后，我的原始答案稍后会使用其等效的 $scope.meetingsInfoImgData 来填充它发送到 Firebase 的 JavaScript 对象：

$scope.episode.img1 = $scope.episodeImgData;
var episodes = $firebase(ref).$asArray();
episodes.$add($scope.episode);

当您的代码尝试在 Firebase 中创建对象时，它不会对 $scope.meetingsInfoImgData 执行任何操作。您的代码中可能还需要类似于 $scope.episode.img1 = $scope.episodeImgData; 的内容。

【讨论】：

谢谢弗兰克，我犯了一个错误，现在更好了jsfiddle.net/9cazhb44 页面没有完美加载，虽然我确实在这里部署了它achievementsapp.firebaseapp.com 只需注册。如果你打开 meeting.js 我想在 $scope.addMeeting 函数中添加 .img1 $scope，这将如何工作？
那个小提琴仍然是一个完整的应用程序，只是没有功能。如果您将问题隔离为最小但完整的再现，我可能会提供帮助。请阅读stackoverflow.com/help/mcve 并申请。
我正在使用 angular 和 firebase，我无法说出将这段代码放在小提琴中的方法，这是缩小版 jsfiddle.net/9cazhb44/5
这是一个在小提琴中使用 AngularFire 的示例：jsfiddle.net/firebase/cWBQH
谢谢你的帮助，我把代码像例子jsfiddle.net/9cazhb44/9我收到了这个错误{“error”：“请使用POST请求”}

【解决方案2】：

如果由于某种原因您无法从源头修复它，请使用以下简单技巧来确保您的对象不包含任何未定义的道具： JSON.parse( JSON.stringify(ObjectToSave ) )

有关更多信息，请查看此 codePen：http://codepen.io/ajmueller/pen/gLaBLX

【讨论】：