由网友(日光倾城未必温暖)分享简介：在我的流星+角+ CollectionFS的项目，我有这个功能：In my Meteor + Angular + CollectionFS project I have this function :$scope.upload = function(file) {Images.insert(file._file,...

在我的流星+角+ CollectionFS的项目，我有这个功能：

In my Meteor + Angular + CollectionFS project I have this function :

$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
        }
    });
};

问题是我有503错误我的＆LT; IMG NG-SRC ={{project.teaserImg}}/＆GT; 在我的模板，因为该文件还没有完成尚未上传。如果我没有强迫刷新，等待几秒钟，它的工作原理。

The problem is I have 503 error on my <img ng-src="{{project.teaserImg}}"/> in my template because the file has not finished to upload yet. If I don't force the refresh and wait a few second, it works.

所以我要寻找像onProgress，onFileWrtiten等事件......处理this.I找不到的回购

So I am looking for event like onProgress, onFileWrtiten, etc... to handle this.I can't find any detailled doc in the repo

推荐答案

实际上 FSCollection 有一个名为的流星-CFS-UI ，它有一个进度条。

Actually FSCollection have a Package named Meteor-cfs-ui, and it have a progress bar.

所以，首先添加

meteor add cfs:ui

所以用这个包，你可以做到这一点的＆LT;模板＆GT; ，这仅仅是一个的 HTML 解决方案

So with this package, you can do this on the <template>, this is just a HTML solution

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

如果你不想做的HTML端的工作，也有一个的JavaScript 解决方案，以2更多钞票选择客户端或服务器端，选择你认为它适合更好。

If you don't want to make the work on the HTML side, also there is a JavaScript Solution, with 2 posible options client side or server side, choose what you think it suits better.

客户端解决方案，在这里你有2种方法 fileObj.isUploaded 和 fileObj.hasStored （没有因为的创作者在 README文件此包清洗前几天。）

Client side Solution, here you have 2 methods fileObj.isUploaded and fileObj.hasStored (There is not Documentation on the README for this since the creators of the package clean it few days ago.)

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

或服务器端解决方案，中心对服务器端的3个事件，存储，上传和错误。

or Server side solution, CFS has 3 events on the server side, stored,uploaded and 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")
    });

上传用户SOLUTION

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