Pregunta ¿Cómo se manejaría una carga de archivo con Meteor?


¿Cuál sería la forma canónica de manejar una carga de archivo con Meteor?


76
2018-04-11 02:54


origen


Respuestas:


Actualmente no parece haber una manera de interactuar con el servidor HTTP o hacer algo relacionado con HTTP.

Lo único que puede hacer es hablar con el servidor sobre los métodos RPC expuestos por Meteor.methods o hablar con mongoDB directamente sobre la API mongoDB expuesta.


17
2018-04-11 06:24



solía http://filepicker.io. Cargarán el archivo, lo almacenarán en su S3 y le devolverán una URL donde se encuentra el archivo. Luego simplemente coloco la url en un DB.

  1. Wget la secuencia de comandos filepicker en su carpeta de cliente.

    wget https://api.filepicker.io/v0/filepicker.js
    
  2. Insertar una etiqueta de entrada de filtro de datos

    <input type="filepicker" id="attachment">
    
  3. En el inicio, inicialízalo:

    Meteor.startup( function() {
        filepicker.setKey("YOUR FILEPICKER API KEY");
        filepicker.constructWidget(document.getElementById('attachment'));
    });
    
  4. Adjuntar un controlador de eventos

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

44
2017-09-18 20:47



Para las imágenes, utilizo un método similar a Dario excepto que no escribo el archivo en el disco. Guardo los datos directamente en la base de datos como un campo en el modelo. Esto funciona para mí porque solo necesito admitir navegadores compatibles con API de archivos HTML5. Y solo necesito un soporte de imagen simple.

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



Acabo de venir con una implementación de cargas de archivos utilizando Meteor.methods y API de archivos HTML5. Déjame saber lo que piensas.


19
2017-10-20 05:32



Hay un nuevo paquete: edgee: tirachinas. No carga los archivos a su servidor de meteoritos, pero es mejor así porque permite que el servidor de meteoritos se centre en su objetivo principal de servir a la aplicación de meteoritos en lugar de manejar costosas transferencias de archivos.

En su lugar, carga archivos a servicios de almacenamiento en la nube. Actualmente admite AWS S3 y Google Cloud Files, pero también admitirá Rackspace Cloud Files y tal vez Cloudinary en el futuro.

Su servidor de meteoritos simplemente actúa como coordinador.

Direct VS Indirect uploads

También es un paquete muy versátil y liviano.


11
2018-01-12 23:35



hay un paquete de atmósfera llamado router que permite eso.

de hecho, la mejor manera de manejar las cargas de archivos es ahora collectionFS


7
2018-03-24 15:57



Aquí está la mejor solución para este momento. Usa collectionFS.

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

Cliente:

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

Servidor:

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

Modelo:

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

7
2017-09-09 06:12



Puedes intentar subir directamente a amazon S3, haciendo algunos trucos con cargadores js y esas cosas. http://aws.amazon.com/articles/1434


3
2018-04-11 12:57



Si no requiere archivos significativamente grandes o tal vez solo almacena los archivos por un período corto de tiempo, entonces esta solución simple funciona muy bien.

En tu html ...

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

En tu mapa de evento de plantilla ...

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

Suscríbete a la colección y en una plantilla muestra un enlace ...

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

Si bien esta puede no ser la solución más robusta o elegante para archivos grandes o una aplicación con gran cantidad de archivos, funciona muy bien para todo tipo de formatos de archivo si desea implementar una carga y descarga / renderización simples de los archivos.


3
2017-09-06 22:27



Puedes ver en el hoja de ruta del meteorito que la función "Patrón de carga de archivos" está programada para "Después de 1.0". Entonces tenemos que esperar para ver una forma oficial.

Por ahora, una de las mejores maneras es usar "collectionFS" (que es la vista previa del desarrollador 0.3.x en el momento de la escritura).

O inkfilepicker (por ejemplo, filepicker.io) como se sugiere aquí. Es bastante fácil de usar, aunque esto obviamente requiere una conexión a Internet desde el lado del usuario.

Si es solo para jugar, también puede aprovechar la función html5. Algo como ese.


2
2017-09-22 02:21



aquí hay otra solución:

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

Esta utiliza la solución de carga de Blueimp que admite subidas segmentadas, barras de progreso y más.


2
2017-11-24 21:42