Pertanyaan Bagaimana seseorang menangani file yang diunggah dengan Meteor?


Apa cara kanonik untuk menangani unggahan file dengan Meteor?


76
2018-04-11 02:54


asal


Jawaban:


Saat ini tampaknya tidak ada cara untuk berinteraksi dengan server HTTP atau melakukan sesuatu yang terkait dengan HTTP.

Satu-satunya hal yang dapat Anda lakukan adalah berbicara dengan server melalui metode RPC yang diekspos oleh Meteor.methods atau berbicara dengan mongoDB langsung melalui API mongoDB yang diekspos.


17
2018-04-11 06:24



Saya menggunakan http://filepicker.io. Mereka akan mengunggah file, menyimpannya ke dalam S3 Anda, dan mengembalikan Anda URL tempat file itu berada. Lalu saya hanya memasang url ke DB.

  1. Wget script filepicker ke folder klien Anda.

    wget https://api.filepicker.io/v0/filepicker.js
    
  2. Masukkan tag input filepicker

    <input type="filepicker" id="attachment">
    
  3. Di startup, lakukan inisialisasi:

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

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

44
2017-09-18 20:47



Untuk gambar, saya menggunakan metode yang serupa dengan Dario kecuali saya tidak menulis file ke disk. Saya menyimpan data langsung di database sebagai bidang pada model. Ini bekerja untuk saya karena saya hanya perlu mendukung browser yang mendukung API File HTML5. Dan saya hanya butuh dukungan gambar sederhana.

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



Saya baru saja datang implementasi upload file menggunakan Meteor.methods dan API File HTML5. Biarkan aku tahu apa yang Anda pikirkan.


19
2017-10-20 05:32



Ada paket baru: edgee: katapel. Itu tidak meng-upload file ke server meteor Anda, tetapi lebih baik seperti itu karena memungkinkan server meteor untuk fokus pada tujuan utamanya melayani aplikasi meteor alih-alih menangani transfer file mahal.

Sebaliknya itu mengunggah file ke layanan penyimpanan cloud. Saat ini mendukung AWS S3 dan Google Cloud Files, tetapi ini juga akan mendukung Rackspace Cloud Files dan mungkin Cloudinary di masa depan.

Server meteor Anda hanya bertindak sebagai koordinator.

Direct VS Indirect uploads

Ini juga merupakan paket yang sangat fleksibel dan ringan.


11
2018-01-12 23:35



ada paket atmosfer yang disebut router yang memungkinkan hal itu.

sebenarnya, cara terbaik untuk menangani unggahan file sekarang collectionFS


7
2018-03-24 15:57



Inilah solusi terbaik untuk saat ini. Itu menggunakan collectionFS.

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

Klien:

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

Kerangka:

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

7
2017-09-09 06:12



Anda dapat mencoba mengunggah langsung ke amazon S3, melakukan beberapa trik dengan pengunggah js dan sebagainya. http://aws.amazon.com/articles/1434


3
2018-04-11 12:57



Jika Anda tidak memerlukan file besar secara signifikan atau mungkin hanya menyimpan file untuk waktu yang singkat maka solusi sederhana ini bekerja dengan sangat baik.

Di html Anda ...

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

Di peta acara template Anda ...

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

Berlangganan Koleksi dan di templat render tautan ...

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

Meskipun ini mungkin bukan solusi paling kuat atau elegan untuk file besar atau aplikasi intensif file, ini bekerja sangat baik untuk semua jenis format file jika Anda ingin mengimplementasikan upload sederhana dan unduh / render file.


3
2017-09-06 22:27