在Ruby on Rails中如何从多上传图片里选一张在首页展示？

1. 新增封面索引字段 #

首先生成迁移，给Post表添加一个用来记录选中图片位置的整数字段：

rails generate migration AddCoverImageIndexToPosts cover_image_index:integer
rails db:migrate

更新Post模型，可选添加验证确保索引有效：

class Post < ApplicationRecord
  has_many_attached :images

  # 可选验证：当有图片且指定了封面索引时，确保索引在合法范围内
  validate :valid_cover_image_index, if: -> { images.attached? && cover_image_index.present? }

  private

  def valid_cover_image_index
    unless cover_image_index.between?(0, images.count - 1)
      errors.add(:cover_image_index, "超出图片数量范围")
    end
  end
end

2. 更新控制器参数允许列表 #

把cover_image_index加入到参数白名单：

params.require(:post).permit(:title, :body, :cover_image_index, images: [])

3. 在表单中添加封面选择控件 #

在Post的创建/编辑表单里，加入让用户选择封面的下拉框（以编辑页面为例，已上传图片时显示选项）：

# app/views/posts/_form.html.erb
<div class="field">
  <%= form.label :cover_image_index, "选择封面图" %>
  <% if @post.images.attached? %>
    <%= form.select :cover_image_index, @post.images.each_with_index.map { |img, idx| ["图片#{idx+1}", idx] }, prompt: "请选择" %>
  <% else %>
    <p>请先上传图片再选择封面</p>
  <% end %>
</div>

如果是创建页面，上传图片后需要动态加载选项，可以结合Turbo或JavaScript实现实时更新。

4. 在首页展示选中的封面图 #

在首页视图里，根据cover_image_index取出对应图片，未指定则默认取第一张：

# app/views/home/index.html.erb
<% @posts.each do |post| %>
  <div class="post-card">
    <h3><%= post.title %></h3>
    <% if post.images.attached? %>
      <% selected_img = post.cover_image_index.present? ? post.images[post.cover_image_index] : post.images.first %>
      <%= image_tag selected_img.variant(resize: "300x200>"), alt: "#{post.title}封面" %>
    <% else %>
      <p class="no-image">暂无图片</p>
    <% end %>
    <p><%= truncate(post.body, length: 100) %></p>
  </div>
<% end %>

优化：安全获取封面图的模型方法 #

为了避免删除选中图片后出现错误，可以在Post模型里封装一个安全获取封面的方法：

class Post < ApplicationRecord
  # ... 已有代码 ...

  def cover_image
    return nil unless images.attached?
    # 若指定索引有效则返回对应图片，否则返回第一张
    cover_image_index.present? && cover_image_index < images.count ? images[cover_image_index] : images.first
  end
end

之后视图可以简化为：

<% if post.cover_image %>
  <%= image_tag post.cover_image.variant(resize: "300x200>"), alt: "#{post.title}封面" %>
<% else %>
  <p class="no-image">暂无图片</p>
<% end %>

内容的提问来源于stack exchange，提问作者Myo Min Htet