流星方法

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

FileListまたはFileのいずれかの変数をDDPを通じて流行方式に渡すことはできません。

最も簡単な方法は、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などのアップロード/保存するファイルのお手伝いをするために設計された数多くのパッケージ、のいずれかを使用することができます。