試圖文件數組傳遞給流星方法

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類型的變量傳遞給流星方法。

最簡單的方法是使用FileReader並將文件內容作爲二進制字符串讀取並傳遞給服務器方法，該方法將其保存到文件系統或數據庫中。

客戶端：

'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之一，例如。