如何使用AJAX将用户上传的CSV文件发送到我的Rails后端?

时间:2017-10-26 23:21:52

标签: ruby-on-rails ajax reactjs csv post

我正在运行Rails / React Web应用程序,并有一个文件输入字段供用户上传CSV文件。我想将此CSV文件发送到我的后端,解析它并使用该信息创建一批新用户。

我有输入字段

<div>
 <label htmlFor="add-doc">Bulk Add</label>
 <input style={{display: 'none'}} onChange={this.uploadCSV} id="add-doc" name='csv-file' type="file"/>
</div>

我的onChange功能。我尝试了很多不同的东西,大多数情况下我认为它归结为我如何传递文件,它可能是错误的格式?我不知道

uploadCSV(evt) {
  evt.preventDefault();
  let file = evt.target.files[0]
  let formData = new FormData();
  formData.append('file', file);
  $.ajax({
    url: '/api/v1/client/employees',
    type: 'POST',
    dataType: 'json',
    data: formData,
    contentType: false,
    processData: false
   });
  }

2 个答案:

答案 0 :(得分:0)

您是否使用gem pry作为rails?如果肯定会在控制器方法上放置binding.pry并在服务器终端上写params并给出答案。

也许可以是从前端到后端的编码。

答案 1 :(得分:0)

我认为您可能需要使用加密类型multipart/form-data,因为它是文件上传。

我得出的结论是,您说问题可能出在客户端,而不是服务器端。如果您可以使用堆栈跟踪或断点处的某些信息给出特定错误,我可以提供帮助。这就是我的头脑。

uploadCSV(evt) {
  evt.preventDefault();
  let file = evt.target.files[0]
  let formData = new FormData();
  formData.append('file', file);

   $.ajax({
       url: '/api/v1/client/employees',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
 });