從Ember Js發送CSV文件到Rails使用Ajax

Question

我想從Ember Js上傳一個帶有ajax的csv文件，並在我的Rails應用程序中讀取它。 我試過兩種不同的方法。在第一個我試圖從灰燼發送的文件是這樣的：

submitImport() { 
    var fd = new FormData(); 
    var file = this.get('files')[0]; 
    fd.append("csv_file", file); 
    return this.get('authAjax') 
    .request('/contacts/import/csv', { 
     method: 'POST', 
     processData: false, 
     contentType: false, 
     data: fd 
    }); 
} 

但問題是，我不明白在Rails應用程序的csv_file PARAM。 request.content_type是application/x-www-form-urlencoded，我需要多部分表單。我可以使用reques.raw_post，但然後我得到這樣的------WebKitFormBoundarymgBynUffnPTUPW3l\r\nContent-Disposition: form-data; name=\"csv_file\"; filename=\"elevatr_import.csv\"\r\nContent-Type: text/csv\r\n\r\ngeorgica,gica@me.com\nleo, leonard@yahoo.com\ngigel, becali@oita.fcsb\n\r\n------WebKitFormBoundarymgBynUffnPTUPW3l--\r\n，我需要以某種方式解析這個，我不太喜歡這個解決方案。

另一種方法是發送文件base64編碼，然後從Rails解碼。我已經試過這樣：

`

submitImport() { 
    var fd = new FormData(); 
    var file = this.get('files')[0]; 
    this.send('getBase64', file); 
    var encoded_file = this.get('encoded_file'); 

    return this.get('authAjax') 
    .request('/contacts/import/csv', { 
     method: 'POST', 
     data: { csv_file: encoded_file } 
    }); 
}, 
getBase64(file) { 
    var controller = this; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function() { 
    controller.set('encoded_file', reader.result); 
    }; 
} 

但由於某些原因，POST請求被提交第一個也是唯一的getBase64方法被調用後。 有誰知道這是爲什麼發生，或者如果我應該使用不同的方法？

感謝

Answer 1

FORMDATA

發送使用multipart/form-data，你有正確的想法，並設定了正確的選擇，但它可能是authAjax或別的東西設置所造成衝突的選項，導致內容類型爲application/x-www-form-urlencoded。

// this should make a request with a content-type of multipart/form-data 
$.ajax({ 
    url: 'upload/destination', 
    type: 'POST', 
    data: formDataObj, 
    contentType: false, 
    processData: false, 
}); 

的Base64

您的請求之後被讀取文件的原因是FileReader作品異步。要以base64編碼的字符串形式發送，您需要在啓動ajax請求之前等待讀者完成。您可以通過在onloadend事件之後提出請求來完成此操作。

actions: { 
    submitImport() { 
    var file = this.get('files')[0]; 
    this.encodeAndSendFile(file); 
    }, 
}, 
sendFile(base64File) { 
    return this.get('authAjax') 
    .request('/contacts/import/csv', { 
    method: 'POST', 
    data: { csv_file: encoded_file }, 
    }); 
}, 
encodeAndSend(file) { 
    var controller = this; 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
    controller.sendFile(reader.result); 
    }; 
    reader.readAsDataURL(file); 
}