未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

Reactで画像を送信する

Reactで画像を送信する上で要点をまとめました。

カラムを追加する

class AddImageToTweets < ActiveRecord::Migration[5.2]
  def change
    add_column :tweets, :image, :string
  end
end

carriaweaveを入れる

gem 'carrierwave'

アップローダーを作成

rails g uploader Tweet

マウントする

tweet.rb
  mount_uploader :image, TweetUploader

リサイズ設定

tweet_uploader.rb

  include CarrierWave::MiniMagick # コメントアウト外す
  process resize_to_limit: [300, 300] #サイズ設定

画像保存で少し詰まった

## react側 でFileオブジェクト

画像を参照

## controller側ではこれを受け取る必要がある

#<ActionDispatch::Http::UploadedFile:0x007fd56e630a10

f:id:everydayProguramming:20200709235211p:plain

画像を表示したい

 const url = URL.createObjectURL(e.target.files[0])

 <img src={url}/>

画像をgitの対象から外す

. gitignore
/public/uploads/