Rails 7集成Turbo时文件上传提交按钮跳转异常问题排查

核心问题分析 #

你的代码存在两个关键问题，导致表单提交行为不符合预期：

1. 控制器中文件读取逻辑错误，触发异常后Rails的错误处理导致请求 fallback 到当前页面的GET请求
2. 缺少Turbo兼容的响应，控制器执行完成后无有效返回，引发页面刷新

具体修复步骤 #

1. 修复控制器的文件读取与响应逻辑

params[:file]是ActionDispatch::Http::UploadedFile实例，不能直接用File.open打开，需读取文件内容；同时要添加Turbo可识别的响应，避免页面刷新：

class ProfileController < ApplicationController
  def kyc_document_upload
    # 正确读取上传文件的内容
    file_content = params[:file].read
    encoded_content = Base64.encode64(file_content)
    ExternalApi.user.sent_missing_docs(encoded_content)

    # 返回Turbo流式响应，实现无刷新提示
    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.update('upload-status', partial: 'profile/upload_success')
      end
      # 兼容非Turbo场景的响应
      format.html { redirect_to profile_path, notice: '文件上传成功' }
    end
  end
end

2. 优化表单配置

显式指定请求方法与Turbo标识（避免Turbo加载异常导致的问题），并添加提示容器：

<%= form_tag(kyc_document_upload_path, multipart: true, method: :post, data: { turbo: true }) do %>
  <%= file_field_tag "file" %>
  <%= submit_tag "上传文件" %>
<% end %>

<!-- 用于显示上传结果的容器 -->
<div id="upload-status"></div>

3. 创建成功提示的局部视图

在app/views/profile/目录下创建_upload_success.html.erb：

<div class="alert alert-success">文件已成功提交至外部服务</div>

4. 确认Turbo加载正常

检查app/javascript/application.js中是否包含Turbo的导入：

import "@hotwired/turbo-rails"

原代码失效的原因 #

• 错误的文件读取逻辑触发异常，Rails的错误处理机制将请求 fallback 到当前页面的GET请求，导致URL附带参数并刷新页面
• 控制器无有效响应时，Rails会尝试渲染同名模板（kyc_document_upload.html.erb），该模板不存在时引发错误，进一步触发页面刷新

内容的提问来源于stack exchange，提问作者mr_muscle