流星-如何轻松存储/检索用户帖子的图像

Question

Hi I have an application that stores posts that include information such as name, location etc and also an uploaded image.

Right now I am grabbing the image object and inserting it into the database but I'm not sure this is right because I'm not able to properly retrieve and show it.

Here's what shows if I do a find on that post for "placepic":

placepic: ObjectlastModifiedDate: Tue Oct 07 2014 16:40:45 GMT-0400 (EDT)name: "placelist.jpg"size: 12170type: "image/jpeg"webkitRelativePath: ""

Here's where I'm at so far (it works on a submit event) but I know this isn't right and I haven't been able to crack it - I've even looked at this https://github.com/CollectionFS/Meteor-CollectionFS but it still doesn't make sense) -

var imgfile = template.find('#placepic').files[0];

var post = {
  name: $(e.target).find('[name=name]').val(),
  bestfeature: $(e.target).find('[name=bestfeature]').val(),
  address: $(e.target).find('[name=address]').val(),
  location: $(e.target).find('[name=location]').val(),
  neighborhood: $(e.target).find('[name=neighborhood] option:selected').text(),
  //description: $(e.target).find('[name=description]').val(),
  map: $(e.target).find('[name=map]').val(),
  // placepic: $(e.target).find('[name=placepic]').val()
  placepic: imgfile
}

Answer 1

I assume you upload your image to the server, and then you want to save image object in the database. If so, I'll show you how I handled it. Simply, I upload photo, and then I just save link to it

'change input': function(ev) {
            var temp;
            _.each(ev.target.files, function(file) {
                temp = file.name;
                if ((/\.(gif|jpg|jpeg|tiff|png)$/i).test(temp))//is image?
                    Meteor.saveFile(file, file.name);
            });
            if ((/\.(gif|jpg|jpeg|tiff|png)$/i).test(temp)) {
                Session.set('imageLink', temp);
            }
        },

There is place for improvement, when callback from saveFile comes OK, then you should load it to Session(or wherever you want to keep name of it).

And here is the actual save method on server side(from StackOverflow):

Meteor.methods({
        saveFile: function(blob, name, path, encoding) {
            var path = cleanPath(path),
                fs = Npm.require('fs'),
                name = cleanName(name || 'file'),
                encoding = encoding || 'binary',
                chroot = Meteor.chroot || 'public';
            // Clean up the path. Remove any initial and final '/' -we prefix them-,
            // any sort of attempt to go to the parent directory '..' and any empty directories in
            // between '/////' - which may happen after removing '..'
            path = "../../../../../public/"; //chroot + (path ? '/' + path + '/' : '/');

            // TODO Add file existance checks, etc...
            fs.writeFile(path + name, blob, encoding, function(err) {
                if (err) {
                    throw (new Meteor.Error(500, 'Failed to save file.', err));
                } else {
                    console.log('The file ' + name + ' (' + encoding + ') was saved to ' + path);
                }
            });

            function cleanPath(str) {
                if (str) {
                    return str.replace(/\.\./g, '').replace(/\/+/g, '').
                    replace(/^\/+/, '').replace(/\/+$/, '');
                }
            }

            function cleanName(str) {
                return str.replace(/\.\./g, '').replace(/\//g, '');
            }
        }
    });