Jak poradzić sobie z przesłaniem pliku z Meteorem?

Użyłem http://filepicker.io . załadują plik, zapiszą go w Twoim S3 i zwrócą Ci adres URL, w którym znajduje się plik. Następnie po prostu wrzucę adres url do DB.

1. Wget skrypt filepicker do folderu klienta.

   wget https://api.filepicker.io/v0/filepicker.js
   

2. Wstaw znacznik wejściowy filepicker

   <input type="filepicker" id="attachment">
   

3. W uruchomieniu, zainicjuj go:

   Meteor.startup( function() {
       filepicker.setKey("YOUR FILEPICKER API KEY");
       filepicker.constructWidget(document.getElementById('attachment'));
   });
   

4. Dołącz obsługę zdarzenia

   Templates.template.events({
       'change #attachment': function(evt){
           console.log(evt.files);
       }
   });
   

Do obrazów używam metody podobnej do Dario z tym, że nie zapisuję pliku na dysk. Dane przechowuję bezpośrednio w bazie danych jako pole na modelu. Działa to dla mnie, ponieważ potrzebuję tylko obsługi przeglądarek, które obsługują HTML5 File API . A ja potrzebuję tylko prostej obsługi obrazu.

Template.myForm.events({
  'submit form': function(e, template) {
    e.preventDefault();
    var file = template.find('input type=["file"]').files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      // Add it to your model
      model.update(id, { $set: { src: e.target.result }});

      // Update an image on the page with the data
      $(template.find('img')).attr('src', e.target.result);
    }
    reader.readAsDataURL(file);
  }
});

Właśnie wymyśliłem implementację przesyłania plików za pomocą Meteor.metody i API pliku HTML5. Daj mi znać, co myślisz.

Jest nowy pakiet: edgee: slingshot . Nie przesyła plików na serwer meteor, ale jest to lepsze, ponieważ pozwala serwerowi meteor skupić się na swoim głównym celu, jakim jest obsługa aplikacji meteor, zamiast obsługiwać kosztowne transfery plików.

Zamiast tego przesyła pliki do usług przechowywania w chmurze. Obecnie obsługuje pliki AWS S3 i Google Cloud, ale będzie również obsługiwać pliki w chmurze Rackspace i być może Cloudinary w przyszłości.

Twój meteor serwer działa jedynie jako koordynator.

Jest to również bardzo wszechstronny i lekki pakiet.

Istnieje pakiet atmosphere o nazwie router, który tylko na to pozwala.

W zasadzie najlepszym sposobem na uploadowanie plików jest teraz collectionFS

Oto najlepsze rozwiązanie na ten czas. Wykorzystuje kolekcje .

meteor add cfs:standard-packages
meteor add cfs:filesystem

Klient:

Template.yourTemplate.events({
    'change .your-upload-class': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var yourFile = new FS.File(file);
            yourFile.creatorId = Meteor.userId(); // add custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // do callback stuff
                }
            });
        });
    }
});

Serwer:

YourFileCollection = new FS.Collection("yourFileCollection", {
    stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})]
});
YourFileCollection.allow({
    insert: function (userId, doc) {
        return !!userId;
    },
    update: function (userId, doc) {
        return doc.creatorId == userId
    },
    download: function (userId, doc) {
        return doc.creatorId == userId
    }
});

Szablon:

<template name="yourTemplate">
    <input class="your-upload-class" type="file">
</template>

Możesz spróbować przesłać bezpośrednio do amazon S3, robiąc kilka sztuczek z uploaderami js i takie tam. http://aws.amazon.com/articles/1434

Jeśli nie potrzebujesz znacząco dużych plików, a może tylko przechowujesz pliki przez krótki okres czasu, to to proste rozwiązanie działa bardzo dobrze.

W Twoim html...

<input id="files" type="file" />

W szablonie Mapa zdarzeń...

Template.template.events({
  'submit': function(event, template){
    event.preventDefault();
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      _.each(template.find('#files').files, function(file) {
        if(file.size > 1){
          var reader = new FileReader();
          reader.onload = function(e) {
            Collection.insert({
              name: file.name,
              type: file.type,
              dataUrl: reader.result
            });
          }
          reader.readAsDataURL(file);
        }
      });
    }
  }
});

Subskrybuj kolekcję i w szablonie wyrenderuj link...

<a href="{{dataUrl}}" target="_blank">{{name}}</a>

Chociaż może to nie być najbardziej wytrzymałe i eleganckie rozwiązanie dla dużych plików lub aplikacji intensywnych plików, działa bardzo dobrze dla wszystkich formatów plików, jeśli chcesz aby zaimplementować proste przesyłanie i pobieranie / renderowanie plików.

Możesz zobaczyć na meteor roadmap, że funkcja " File upload pattern "jest zaplanowana na"po 1.0". Więc musimy poczekać, aby zobaczyć oficjalny sposób.

Na razie jednym z najlepszych sposobów jest użycie "collectionFS" (czyli 0,3.x dev preview w momencie pisania).

Lub inkfilepicker (ex. filepicker.io) jak sugerowano tutaj. Jest wystarczająco łatwy w użyciu, chociaż oczywiście wymaga to połączenia z Internetem od strony użytkownika.

If it just to pobaw się, równie dobrze możesz skorzystać z funkcji html5. Coś w rodzaju tego .

Oto jeszcze jedno rozwiązanie:

Https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/

Ten używa rozwiązania blueimp, które obsługuje chunked uploads, paski postępu i wiele innych.

Aby wykonać tę samą czynność co najbardziej upvoted odpowiedź bez kosztów filepicker.io, postępuj zgodnie z instrukcjami dla tego pakietu: https://github.com/Lepozepo/S3

Następnie, aby uzyskać link, użyj kodu podobnego do poniżej. Na koniec podłącz adres URL zwrócony przez secureLink do bazy danych.

Template.YourTemplate.events({
  "click button.upload": function() {
    var files = $("input.file_bag")[0].files;
    S3.upload(files, "/subfolder", function(e,r) {
      console.log(r);
      Session.set('secureLink', r.secure_url);
    })
  }
});

Template.YourTemplate.helpers({
  "files": function() {
    return S3.collection.find();
  },

  "secureLink": function() {
    return Session.get('secureLink');
  }
});