Meteor中 用collectionFS上传图片并显示到界面上

标签：meteor

用collectionFS上传图片并显示到界面上关键是要，确定是否完全上传完成,再通过Session通知界面显示 。方法 有两种：1，用fileObj.hasStored(‘你的数据库表名’)  2. file.isUploaded() 

本文用第一种方法。

原文：http://blog.csdn.net/casun_li/article/details/46356379

1. 服务器端

//图标文件
images = new FS.Collection("imges",{
    stores: [new FS.Store.FileSystem("imges", {path:"/data/files/images"})],
    filter: {
        maxSize: 100*1024*1024, // in bytes
        allow: {
            extensions: [‘png‘]
        },
        onInvalid: function (message) {
            if (Meteor.isClient) {
                alert(message);
            } else {
                console.log(message);
            }
        }
    }
});

2. client:

 var setIconUploaded=function(fileObj){
    var intervalHandle = Meteor.setInterval(function () {
        //console.log("intervalHandle。。。。。。。。。");

        if (fileObj.hasStored(‘你的数据库表名’)) {//等文件存储成功后再调用 //这具方法有一个问题，一定要有
                                                 //images.findOne(fileObj._id)查到数据出来，fileObj.hasStored（）才起作用
             Session.set(‘iconUploaded‘, true);
           //console.log("Session.set(‘iconUploaded‘, true)");           
           // file has stored, close out interval          
            Meteor.clearInterval(intervalHandle);      
       }else{    
        //console.log("intervalHandle。。。1000。");   
       }   
    },
 1000);}





Template.uploadimg.events({    ‘change #img‘: function(event, template) {//图标     

   FS.Utility.eachFile(event, function(file) {            
        images.insert(file, function (err, fileObj) {

                if (err) {
                    //alert(‘上传图标失败:‘+err);
                    console.log(‘上传图标失败:‘+err);
                    return;
                }

               
                Session.set(‘iconUploaded‘, false);
                console.log("上传图标成功");

                setIconUploaded(fileObj);//通过这个方法通知界面显示 
    

            });

        });

    }
});


Template.uploadimg.helpers({
    showIcon:function(){
        console.log("Session.get(‘iconUploaded‘)"+Session.get(‘iconUploaded‘));
        if(Session.get(‘iconUploaded‘)){
            return ‘cfs/files/imges/‘+icon_file_id;//icon_file_id: 一个变量，fileObj._id 的値给他;
        }
        return "";//Session.get("icon_file_id","")
    }

});


3.html:

<div class="form-group">
  
    <div class="col-sm-10">
        <input type="file" id="img" >
        <p class="help-block">请上传512X512像素PNG格式图片，大小不超过512kB</p>
    </div>
</div>


<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
       <img src="{{showIcon}}" alt="icon">
    </div>
</div>


4.最后的大问题 发再用fileObj.hasStored(‘你的数据库表名’)方法不起作用 ，原来没subsribe

server:
Meteor.publish("imgges", function () {
    return imges.find();
});

client:
Template.uploadimg.onRendered(function () {
    this.autorun(function () {
        Meteor.subscribe("imgges");
    });
});

原文：http://blog.csdn.net/casun_li/article/details/46356379
参考：http://stackoverflow.com/questions/29313486/meteor-collectionfs-make-sure-the-image-is-uploaded-before-displaying/29832414#29832414
     
http://stackoverflow.com/questions/28860545/is-there-any-event-to-indicate-that-the-uploaded-file-has-been-written-with-coll/28860844#28860844

Meteor中 用collectionFS上传图片并显示到界面上

标签：meteor

原文地址：http://blog.csdn.net/casun_li/article/details/46356379