Подтвердить что ты не робот

Как можно обрабатывать файл с помощью Meteor?

Каким будет канонический способ обработки загрузки файлов с помощью Meteor?

4b9b3361

ОТВЕТЫ

Ответ 1

В настоящее время, похоже, нет способа взаимодействия с HTTP-сервером или что-либо, связанное с HTTP.

Единственное, что вы можете сделать, это поговорить с сервером по методам RPC, выставленным Meteor.methods, или поговорить с mongoDB непосредственно над открытым файлом mongoDB.

Ответ 2

Я использовал http://filepicker.io. Они загружают файл, сохраняют его в S3 и возвращают вам URL-адрес, где находится файл. Затем я просто вставляю URL-адрес в базу данных.

  • Запустите файл-пиктограмму script в папку клиента.

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

  • Вставить тег ввода filepicker

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

  • В процессе запуска инициализируйте его:

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

  • Прикрепите обработчик событий

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

Ответ 3

Для изображений я использую метод, похожий на Dario's, за исключением того, что я не пишу файл на диск. Я храню данные непосредственно в базе данных как поле модели. Это работает для меня, потому что мне нужно только поддерживать браузеры, поддерживающие HTML5 File API. И мне нужна простая поддержка изображений.

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

Ответ 5

Появится новый пакет: edgee: рогатка. Он не загружает файлы на ваш метеоритный сервер, но это лучше, так как это позволяет метеористскому серверу сосредоточиться на своей основной цели - обслуживать приложение метеоритов вместо обработки дорогостоящих передач файлов.

Вместо этого он загружает файлы в облачные службы хранения. В настоящее время он поддерживает AWS S3 и облачные файлы Google, но он также будет поддерживать файлы облачных хранилищ Rackspace и, возможно, Cloudinary в будущем.

Ваш метеоритный сервер просто действует как координатор.

Direct VS Indirect uploads

Это также очень универсальный и легкий пакет.

Ответ 6

есть пакет атмосферы под названием router, который позволяет именно это.

На самом деле лучший способ обработки загрузки файлов теперь collectionFS

Ответ 7

Вот лучшее решение для этого времени. Он использует collectionFS.

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

Клиент:

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

Сервер:

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

Шаблон:

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

Ответ 8

Вы можете попробовать загрузить непосредственно на amazon S3, делая некоторые трюки с загрузчиками js и т.д. http://aws.amazon.com/articles/1434

Ответ 9

Если вам не нужны значительно большие файлы или, возможно, только хранение файлов в течение короткого периода времени, тогда это простое решение работает очень хорошо.

В вашем html...

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

В вашей карте событий шаблона...

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

Подпишитесь на коллекцию и в шаблоне визуализируйте ссылку...

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

Хотя это может быть не самое надежное или элегантное решение для больших файлов или приложения с интенсивным файлом, оно отлично работает для всех типов форматов файлов, если вы хотите реализовать простую загрузку и загрузку/рендеринг файлов.

Ответ 10

На дорожной карте метеоров вы можете увидеть, что функция "Файл загрузки" запланирована на "После 1.0". Поэтому нам нужно подождать, чтобы увидеть официальный путь.

В настоящее время одним из лучших способов является использование "collectionFS" (это предварительный просмотр версии 0.3.x во время написания).

Или inkfilepicker (например, filepicker.io), как предлагается здесь. Его достаточно просто использовать, хотя это, очевидно, требует и подключения к Интернету со стороны пользователя.

Если вам нужно просто поиграть, вы можете воспользоваться функцией html5. Что-то вроде которое.

Ответ 11

Чтобы выполнить те же действия, что и самый пересмотренный ответ, без стоимости файла filepicker.io, следуйте инструкциям для этого пакета: https://github.com/Lepozepo/S3

Затем, чтобы получить ссылку, используйте код, аналогичный приведенному ниже. Наконец, подключите URL-адрес, возвращенный secureLink в базу данных.

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