如何通过Rails Active Storage实现多文件字段上传？

问题根源 #

1. 多个同名file_field未设置数组格式的name属性，导致Rails接收到的是单个文件对象而非数组，触发undefined method each错误
2. 虽然参数白名单允许了supporting_photos: []，但表单提交的参数结构不匹配，仍会出现Unpermitted parameter警告

修正步骤 #

1. 调整表单代码 #

每个file_field需要显式指定数组格式的name，确保Rails将多个文件字段的值收集为数组：

<div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
  <div class="text-center">
    <div class="mt-4 flex text-sm leading-6 text-gray-600">
      <%= form.file_field :supporting_photos, direct_upload: true, name: "item[supporting_photos][]" %>
    </div>
    <p class="text-xs leading-5 text-gray-600">or drag and drop</p>
    <p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
  </div>
</div>

<div class="sm:col-span-2">
  <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
    <div class="text-center">
      <div class="mt-4 flex text-sm leading-6 text-gray-600">
        <%= form.file_field :supporting_photos, direct_upload: true, name: "item[supporting_photos][]" %>
      </div>
      <p class="text-xs leading-5 text-gray-600">or drag and drop</p>
      <p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
    </div>
  </div>
</div>

<div class="sm:col-span-2">
  <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
    <div class="text-center">
      <div class="mt-4 flex text-sm leading-6 text-gray-600">
        <%= form.file_field :supporting_photos, direct_upload: true, name: "item[supporting_photos][]" %>
      </div>
      <p class="text-xs leading-5 text-gray-600">or drag and drop</p>
      <p class="text-xs leading-5 text-gray-600">PNG, JPG, GIF up to 10MB</p>
    </div>
  </div>
</div>

2. 简化控制器代码 #

不需要手动处理文件附加，Rails会自动通过参数白名单处理数组形式的文件上传，修正后的代码如下：

def create
  @item = current_user.items.build(item_params)
  
  if @item.save
    redirect_to sell_sale_path
  else
    render :new, status: :unprocessable_entity
  end
end

private
def item_params
  params.require(:item).permit(
    :name, :brand, :colour, :condition, :department, 
    :category, :price, :is_sold, :cover_photo, :description,
    supporting_photos: []
  )
end

说明 #

• 设置name: "item[supporting_photos][]"后，浏览器会将多个独立文件字段的内容打包为数组提交给Rails
• 保留原有参数白名单中的supporting_photos: []，确保数组参数被允许
• 移除手动遍历附加文件的代码，Rails的has_many_attached会自动处理数组形式的文件参数

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