Meteor JS image upload and display

问题:

I'm trying to build a E-commerce site with a admin page where the administrator can upload images of certain products. I'd like Meteor to upload those images to a folder and then display those images in the product page of that product.

I know that normally the image files that the client will be using should be inside the 'public' folder, but I'd like to know more about what other options I might have.

Also, if I upload a new file to the 'public' folder or if I delete a file in the 'public' folder, the website refreshes itself...and this is good and bad at the same time depending on what effect you are after....

Here are my questions:

1. What if I create a 'uploads' folder in the server and upload the images to that folder. Would it be possible to display the images inside the 'uploads' folder in the client browser??? How??
2. Is there a way to use the browser to access the contents of the 'public' folder???
3. Is there a way to stop the 'reactivity' of the site if changes happen in the 'uploads' folder created?
4. Is uploading the images to the 'public' folder the best solution available to this problem?

Thank you very much for the help

回答1:

When dealing with what will likely be a large number of images I like to offload not only the storage but also the processing to a third party.

My go-to app in this situation would be Cloudinary. Here's why:

• Storage - I can store the original images outside of my application. A huge benefit to keep images in sync from dev to prod.
• CDN - I get the extra benefits of images being quickly loaded from the Cloudinary CDN.
• Off-load Processing - All of the processing of images is handled by Cloudinary which doesn't slow down my app as a whole.
• Image Manipulation - I can make calls to the original image, calls to just get a thumbnail, and calls to change manipulate, ie :effect => grayscale. So if a 1000x1000px image was uploaded, I can request a 50x50px from Cloudinary that will return the image cropped to that exact size rather than using CSS to shrink a huge image.
• Flexibility - I can change the size of images and return that exact size to the app without having to re-upload images. For example, if my product page pulled in thumbs at 40px, I could easily make a call to grab the same image at 50px.

Hope this helps. http://cloudinary.com/

回答2:

You can do all of this using the meteor package collectionFS. The package is well documented and you have a variety of options that you can uses for storing the uploaded files. CollectionFS also gives the ability for image manipulation on the upload, such as creating a resized thumbnail.

回答3:

I realized this question is a bit old. I had the same problem, one of the solution that works for me is using meteor-upload https://github.com/tomitrescak/meteor-tomi-upload-jquery

回答4:

Definitely don't store stuff in the public directory - it will slow down starting up the app, and hot code refreshes on image upload could easily cause it to crash once there are a decent number of images in there.

Any of the above solutions with storing images elsewhere would work. One other option is using the peerlibrary:aws-sdk package to upload stuff to S3, which is what I use for several apps and have found to be very clean.

回答5:

Storing the image as a base64 string in MongoDB is also a method. Useful for posting to APIs and save the worry of having to handle other 3rd Parties.