Rails 7 + Turbo实现无重定向文件上传并显示成功标识

1. 修正控制器逻辑并返回Turbo Stream响应 #

修改profile_controller.rb中的kyc_document_upload方法，处理文件读取、API调用，并通过Turbo Stream返回页面更新指令：

class ProfileController < ApplicationController
  def kyc_document_upload
    begin
      # 读取上传文件内容（替换原错误的FileRead.read写法）
      file_content = params[:file].read
      encoded_content = Base64.encode64(file_content)
      ExternalApi.user.sent_missing_docs(encoded_content)

      # 返回Turbo Stream，向页面追加成功标记
      respond_to do |format|
        format.turbo_stream do
          render turbo_stream: turbo_stream.append('upload-status', partial: 'profile/upload_success')
        end
      end
    rescue StandardError => e
      # 处理异常，返回错误提示
      respond_to do |format|
        format.turbo_stream do
          render turbo_stream: turbo_stream.append('upload-status', partial: 'profile/upload_error', locals: { error: e.message })
        end
      end
    end
  end
end

2. 更新个人资料页视图 #

在views/profile/show.html.erb中添加状态容器，用于接收Turbo Stream推送的提示内容：

<%= form_tag(kyc_document_upload_path, multipart: true) do %>
  <%= file_field_tag "file" %>
  <%= submit_tag "上传文件" %>
<% end %>
<!-- 状态容器：Turbo Stream将在这里插入提示内容 -->
<div id="upload-status"></div>

3. 创建成功/错误提示的局部视图 #

• 成功提示局部视图views/profile/_upload_success.html.erb：

<div class="upload-success">
  ✅ 文件上传成功！
</div>

• 错误提示局部视图views/profile/_upload_error.html.erb：

<div class="upload-error">
  ❌ 文件上传失败：<%= error %>
</div>

4. 添加样式美化提示 #

在项目样式文件（如app/assets/stylesheets/application.css或profile.scss）中添加绿色成功标记的样式：

.upload-success {
  color: #16a34a;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #f0fdf4;
  border-radius: 4px;
  border: 1px solid #bbf7d0;
}

.upload-error {
  color: #dc2626;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #fee2e2;
  border-radius: 4px;
  border: 1px solid #fecdd3;
}

原理说明 #

Turbo会自动拦截表单提交请求，以异步方式发送给后端。后端返回的Turbo Stream指令会被Turbo解析，动态在页面的upload-status容器中插入提示内容，全程无需刷新页面。

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