Frage Wie würde man einen Datei-Upload mit Meteor handhaben?


Was wäre die kanonische Methode, um einen Datei-Upload mit Meteor zu machen?


76
2018-04-11 02:54


Ursprung


Antworten:


Zur Zeit scheint es keine Möglichkeit zu geben, mit dem HTTP-Server zu interagieren oder etwas mit HTTP zu tun.

Die einzigen Dinge, die Sie tun können, ist mit dem Server über die von Meteor.methods exponierten RPC-Methoden zu sprechen oder mit mongoDB direkt über die mongoDB-API zu kommunizieren.


17
2018-04-11 06:24



ich benutzte http://filepicker.io. Sie laden die Datei hoch, speichern sie in Ihrem S3 und geben Ihnen eine URL zurück, wo sich die Datei befindet. Dann plumpste ich die URL in eine DB.

  1. WGeben Sie das Filepicker-Skript in Ihren Client-Ordner ein.

    wget https://api.filepicker.io/v0/filepicker.js
    
  2. Fügen Sie ein Filepicker-Eingabe-Tag ein

    <input type="filepicker" id="attachment">
    
  3. Initialisieren Sie es im Start:

    Meteor.startup( function() {
        filepicker.setKey("YOUR FILEPICKER API KEY");
        filepicker.constructWidget(document.getElementById('attachment'));
    });
    
  4. Fügen Sie einen Ereignishandler hinzu

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

44
2017-09-18 20:47



Für Bilder verwende ich eine ähnliche Methode Darios außer ich schreibe die Datei nicht auf die Festplatte. Ich speichere die Daten direkt in der Datenbank als ein Feld auf dem Modell. Das funktioniert für mich, weil ich nur Browser unterstützen muss, die das unterstützen HTML5-Datei-API. Und ich brauche nur einfache Bildunterstützung.

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

26
2018-01-04 20:53



Ich bin gerade dabei eine Implementierung von Datei-Uploads Verwenden von Meteor.methods und HTML5 File's API. Lass mich wissen was du denkst.


19
2017-10-20 05:32



Es gibt ein neues Paket: Edge: Schleuder. Es lädt die Dateien nicht auf Ihren Meteorserver hoch, aber es ist besser so, da es dem Meteorserver ermöglicht, sich auf sein primäres Ziel zu konzentrieren, die Meteor-App zu bedienen, anstatt kostspielige Dateiübertragungen zu handhaben.

Stattdessen lädt es Dateien in Cloud-Speicherdienste hoch. Derzeit werden AWS S3 und Google Cloud Files unterstützt, aber auch Rackspace Cloud Files und möglicherweise Cloudinary werden in Zukunft unterstützt.

Ihr Meteorserver fungiert lediglich als Koordinator.

Direct VS Indirect uploads

Es ist auch ein sehr vielseitiges und leichtes Paket.


11
2018-01-12 23:35



es gibt ein Atmosphärenpaket namens Router was genau das erlaubt.

Tatsächlich ist jetzt der beste Weg, Datei-Uploads zu verarbeiten SammlungFS


7
2018-03-24 15:57



Hier ist die beste Lösung für diese Zeit. Es benutzt SammlungFS.

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

Server:

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

Vorlage:

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

7
2017-09-09 06:12



Sie könnten versuchen, direkt auf Amazon S3 hochzuladen, ein paar Tricks mit js uploadern und so. http://aws.amazon.com/articles/1434


3
2018-04-11 12:57