📚 [Ruby on Rails] Carrierwave로 이미지 여러장 업로드 구현하기

* 사용 버전

ruby "3.1.3" 

gem "rails", "~> 7.0.3", ">= 7.0.3.1"

---

* Carrierwave gem 설치하기

gem install carrierwave

* 프로젝트 Gemfile에 붙여넣어주기

gem 'carrierwave', '>= 3.0.0.beta', '< 4.0'

---

* scaffold 생성하기

rails generate scaffold Post name:string title:string content:text image:string

---

* uploader 생성하기

rails generate uploader post_image

* post 모델에 uploader 추가하기

class Post < ApplicationRecord
    require 'carrierwave/orm/activerecord'
    mount_uploaders :image, PostImageUploader
    serialize :image, JSON
end

---

* _form.html.erb 파일에 업로드 버튼 만들기

<%= form.file_field :image, multiple: true, accept: "image/jpeg, image/jpg, image/gif, image/png" %>

 

* PostsController 수정하기

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post_id = Post.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def post_params
      params.require(:post).permit(:name, :title, :content, {image: []})

  end

 

파일올리기를 실행했을 때 db에 image column 부분

---

* 뷰파일 수정하기

 

- post에 가장 마지막에 저장된 이미지를 main에서 보여줄거기 때문에 MainController index에 입력

def index
    last_img = Post.all.last

    @imgvalue = {}
    @imgvalue['size'] = last_img.image.size
    @imgvalue['img_value'] = last_img.image

end

- main view에 src에 입력

 

<div><img class="slide-img" src="<%= @imgvalue['img_value'][0].url%>" alt="이미지"></div>
<div><img class="slide-img" src="<%= @imgvalue['img_value'][1].url%>" alt="이미지"></div>
<div><img class="slide-img" src="<%= @imgvalue['img_value'][2].url%>" alt="이미지"></div>