使用Ajax将Ember Js的CSV文件发送到Rails

Question

我正在尝试从Ember Js上传带有ajax的csv文件,并在我的Rails应用程序中读取它.我尝试了两种不同的方法.在第一个我尝试从Ember发送文件,如下所示:

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参数.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

表单数据

要使用 发送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 编码字符串发送，您需要等待 reader 完成，然后再启动 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);
}