Rails XHR导致错误：SyntaxError：JSON.parse：JSON数据第1行第1列的意外字符

Question

我正在开发Rails应用，并实现了一个上传图片的表单。我正在使用XMLHttpRequest对象提交表单。当我导航到页面并尝试提交表单时，收到以下错误：SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data。

我已经检查了xhr.responseText，即使正确的控制器动作被击中并呈现json响应，它也为空（我已经验证了这一点）。如果我刷新页面，然后尝试使用该表格，它将正常工作。我猜想这可能与turbolinks有关，但是我不确定。下面的代码：

Javascript

document.addEventListener("DOMContentLoaded", function() {
  const uploadImage = document.getElementById("upload_image");
  uploadImage.addEventListener("submit", function(event) {
    var formData = new FormData(uploadImage);

    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload_image", true);

    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        const uploadedImage = document.getElementById("uploaded_image");
        uploadedImage.innerHTML = xhr.responseText;
        uploadImage.reset();
      }
    };

    xhr.send(formData);
  });
});

Controller

def upload_image
    uploaded_io = params[:file]

    if uploaded_io
      File.open(Rails.root.join('public', 'uploads', uploaded_io.original_filename), 'wb') do |file|
        file.write(uploaded_io.read)
      end

      render json: "File successfully uploaded: #{File.join(root_url, 'uploads', uploaded_io.original_filename)}", status: 200
    else
      render json: "No file uploaded", status: 400
    end
  end

Answer 1

document.addEventListener("turbolinks:load", function() {
...
})