Question

我在提交按钮事件中调用这样的方法：

'submit #form': function(event, tmpl){
    var files = null;
    if(event.target.fileInput)
        files = event.target.fileInput.files;

    console.log(f);

    Meteor.call('insertFiles', files, function(err){
        if(err)
        {
            console.log(err);
        }
        else
        {
            console.log('insertFiles returned.');
            Router.go('next_screen');
        }
    });
}

fileInput：

<input type="file" name="fileInput" id="fileInput"
       accept="image/jpeg, image/png, application/pdf" multiple/>

我的方法：

'insertFiles'(files){

    console.log(files);

    //Rest of code.
}

在客户端控制台日志中，我看到如下文件：

FileList {0: File, 1: File, length: 2}

但在方法内部，控制台日志输出：

{ '0': {}, '1': {} }

所以，我没有在方法中看到文件。为什么是这样？如何在方法中获取文件列表？

Answer 1

您不能通过DDP将FileList或File类型的变量传递给meteor方法。

最简单的方法是使用FileReader并将文件内容读取为二进制字符串，并将其传递给服务器方法，该方法会将其保存到文件系统或DB中。

客户端：

'submit #form': function(event, tmpl){
  event.preventDefault();

  const fileInput = document.querySelector('#fileInput');
  const files = _.toArray(fileInput.files);

  let cnt = files.length;
  if (!cnt) {
    return;
  }

  const filesArray = [];
  const addFile = (fileObject) => {
    if (fileObject != null) {
      files.push(fileObject);
    }
    if(!(--cnt)) {
      Meteor.call('insertFiles', filesArray, function(err, res){
        ...
      });
    }
  };

  _.each(files, (file) => {
    const reader = new FileReader();
    const name = file.name;
    const type = file.type;
    reader.onload = (ev) => {
      addFile({
        name, type,
        content: ev.target.result
      });
    };
    reader.onerror = () => {
      addFile(null);
    };
    reader.readAsBinaryString(file);
  });
}

或者，您可以使用众多旨在帮助您上传/存储文件的软件包之一，例如CollectionFS。

试图将一组文件传递给Meteor方法

1 个答案: