Làm thế nào để xử lý một tệp tải lên với Meteor?

Cách chuẩn tắc để xử lý tải lên tệp với Meteor là gì?

Hiện tại dường như không có cách nào để tương tác với máy chủ HTTP hoặc thực hiện bất kỳ điều gì liên quan đến HTTP.

Điều duy nhất bạn có thể làm là nói chuyện với máy chủ qua các phương thức RPC được Meteor.methods hiển thị hoặc nói chuyện với mongoDB trực tiếp qua API mongoDB được hiển thị.

Tôi đã sử dụng http://filepicker.io . Họ sẽ tải tệp lên, lưu trữ tệp đó vào S3 của bạn và trả lại cho bạn một URL chứa tệp. Sau đó, tôi chỉ cần đưa url vào một DB.

1. Quên tập lệnh trình chọn tệp vào thư mục khách hàng của bạn.

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

2. Chèn thẻ đầu vào trình chọn tệp

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

3. Trong phần khởi động, hãy khởi tạo nó:

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

4. Đính kèm trình xử lý sự kiện

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

Đối với hình ảnh, tôi sử dụng một phương pháp tương tự như của Dario ngoại trừ tôi không ghi tệp vào đĩa. Tôi lưu trữ dữ liệu trực tiếp trong cơ sở dữ liệu dưới dạng một trường trên mô hình. Điều này phù hợp với tôi vì tôi chỉ cần hỗ trợ các trình duyệt hỗ trợ API tệp HTML5 . Và tôi chỉ cần hỗ trợ hình ảnh đơn giản.

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

Tôi vừa nghĩ ra cách triển khai tải lên tệp bằng Meteor.methods và API của tệp HTML5. Cho tôi biết bạn nghĩ gì.

Có một gói mới: edgee: slingshot . Nó không tải các tệp lên máy chủ sao băng của bạn, nhưng tốt hơn là theo cách đó vì nó cho phép máy chủ sao băng tập trung vào mục tiêu chính của nó là phục vụ ứng dụng sao băng thay vì xử lý việc truyền tệp tốn kém.

Thay vào đó, nó tải các tập tin lên các dịch vụ lưu trữ đám mây. Hiện tại nó hỗ trợ AWS S3 và Google Cloud Files, nhưng nó cũng sẽ hỗ trợ Rackspace Cloud Files và có lẽ là Cloudinary trong tương lai.

Máy chủ sao băng của bạn chỉ hoạt động như một người điều phối.

Nó cũng là một gói rất linh hoạt và nhẹ.

có một gói khí quyển được gọi là bộ định tuyến cho phép điều đó.

trên thực tế, cách tốt nhất để xử lý việc tải lên tệp bây giờ là collectionFS

Đây là giải pháp tốt nhất cho thời điểm này. Nó sử dụng collectionFS .

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

Khách hàng:

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

Người phục vụ:

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

Bản mẫu:

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

Nếu bạn không yêu cầu các tệp lớn đáng kể hoặc có thể chỉ lưu trữ các tệp trong một khoảng thời gian ngắn thì giải pháp đơn giản này hoạt động rất tốt.

Trong html của bạn ...

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

Trong bản đồ sự kiện mẫu của bạn ...

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

Đăng ký Bộ sưu tập và trong một mẫu hiển thị liên kết ...

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

Mặc dù đây có thể không phải là giải pháp mạnh mẽ hoặc thanh lịch nhất cho các tệp lớn hoặc một ứng dụng chuyên sâu về tệp, nó hoạt động rất tốt cho tất cả các loại định dạng tệp nếu bạn muốn thực hiện tải lên và tải xuống / hiển thị tệp đơn giản.

Bạn có thể thử tải trực tiếp lên amazon S3, thực hiện một số thủ thuật với trình tải lên js và nội dung. http://aws.amazon.com/articles/1434

Bạn có thể thấy trên lộ trình sao băng rằng tính năng "Mẫu tải tệp lên" được lên lịch cho "Sau 1.0". Vì vậy, chúng ta phải chờ xem một cách chính thức.

Hiện tại, một trong những cách tốt nhất là sử dụng "collectionFS" (là bản xem trước dành cho nhà phát triển 0.3.x tại thời điểm ghi).

Hoặc inkfilepicker (ví dụ: filepicker.io) như được đề xuất ở đây. Nó đủ dễ sử dụng, mặc dù điều này rõ ràng là yêu cầu và kết nối Internet từ phía người dùng.

Nếu nó chỉ để chơi xung quanh, bạn cũng có thể tận dụng tính năng html5. Đại loại vậy .

đây là một giải pháp khác:

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

Cái này đang sử dụng giải pháp tải lên của Blueimp hỗ trợ tải lên từng đoạn, thanh tiến trình và hơn thế nữa.

Để thực hiện hành động tương tự như câu trả lời được ủng hộ nhiều nhất mà không phải trả phí filepicker.io, hãy làm theo hướng dẫn cho gói này: https://github.com/Lepozepo/S3

Sau đó, để lấy liên kết, hãy sử dụng mã tương tự như bên dưới. Cuối cùng, cắm url được trả về bởi secureLink vào DB.

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