angularjs - 有没有事件表明上传的文件是用CollectionFS写的？

Question

在我的 Meteor + Angular + CollectionFS 项目中我有这个功能:

$scope.upload = function(file) {
    Images.insert(file._file, function (err, fileObj) {
        if (err) console.log(err);
        else {
            $scope.project.teaserImg = "/cfs/files/images/" + fileObj._id;
            $scope.$apply(); //Force the refresh
        }
    });
};

问题是我的 <img ng-src="{{project.teaserImg}}"/> 有 503 错误在我的模板中，因为文件尚未完成上传。如果我不强制刷新并等待几秒钟，它就会起作用。

所以我正在寻找像 onProgress、onFileWrtiten 等事件来处理这个问题。我在 the repo 中找不到任何详细的文档。

Answer 1

实际上 FSCollection 有一个名为 Meteor-cfs-ui 的包, 它有一个进度条。

所以首先添加它

meteor add cfs:ui

所以使用这个包，你可以在 <template> 上执行此操作, 这只是一个 HTML 解决方案

{{#each images}}
  {{#unless this.isUploaded}}
  {{> FS.UploadProgressBar}}
  {{/unless}}
{{/each}}

如果您不想在 HTML 端工作，还有一个 JavaScript 解决方案，有 2 个可能的选项客户端或服务器端，选择您认为更适合的。

客户端解决方案，这里有 2 个方法 fileObj.isUploaded和 fileObj.hasStored (没有关于 README 的文档，因为包的创建者几天前清理了它。)

    var fileId; //store the current id of the file

        $scope.upload = function(file) {
            Images.insert(file._file, function (err, fileObj) {
                if (err) console.log(err);
                else {
                    fileId = result._id //get the id of the upload file
                    $scope.project.teaserImg = "/cfs/files/images/" + fileObj._id;
                    $scope.$apply(); //Force the refresh
                }
            });
        };
    //Some Reactive tracker to check when the file its ready
   Tracker.autorun(function (computation) {
       var fileObj = Images.findOne(fileId);
       if (fileObj.hasStored('yourStoreName')) {
          computation.stop();
       }
    });

或服务器端解决方案，CFS在服务器端有3个事件，stored , uploaded和 error .

    Images.on('stored', function (fileObj, storeName) {
      console.log("The " + fileObj + " with the _id " + fileObj._id " + just get stored")
    });
    Images.on('uploaded', function (fileObj) {
      console.log("The " + fileObj + " with the _id " + fileObj._id " + just get uploaded")
    });

上传用户解决方案

var fileId; //store the id of the uploaded file 
$scope.upload = function(file){ 
Images.insert(file._file, function (err,fileObj) { 
      if (err) console.log(err); 
      else { fileId = fileObj._id 
     } 
   }); 
}; 

和追踪者

Tracker.autorun(function (computation) { 
    var fileObj = Images.findOne(fileId); 
  if (fileObj) { $scope.project.teaserImg = "/cfs/files/images/" + fileId;      $scope.$apply(); 
computation.stop();
   } 
});