search

akinoriosamura / QaAppServer

0 stars 0 forks source link

画像 #23

Open akinoriosamura opened 6 years ago

akinoriosamura commented 6 years ago

https://qiita.com/mserizawa/items/7f1b9e5077fd3a9d336b multipart/form-dataかbase64エンコーディングを使うのが一般的

https://www.pluralsight.com/guides/ruby-ruby-on-rails/handling-file-upload-using-ruby-on-rails-5-api multipart/form-dataかbase64エンコーディングを使うのが一般的 api側は paperclip とかcarrierwaveを使う

akinoriosamura commented 6 years ago

●画像の登録 画像をバイナリーのまま扱うかbase64エンコーディングしてテキストとして扱うかの選択があるけど、 https://qiita.com/gaaamii/items/27d27fb7685b39744416 を見る限りはバイナリのままで大丈夫そう。 質問投稿と同じ要領でv-model（てのがあるんですね！）+ axiosで APIを呼んでDB登録できる？？

●画像の表示 https://qiita.com/Yarimizu14/items/f56123c738f12ad1844a を見るとajaxでバイナリを返すAPIをコールして結果を受け取れそう https://qiita.com/ksh-fthr/items/ba7c80252edad0e7c66c を見るとaxiosの場合、responseTypeをarraybufferにすれば良さそう 取得できた後は納村さんが教えてくれた https://qiita.com/komatzz/items/f2a25db16aca388845d3 を見るとバイナリとして変数に格納して、v-showを使えば表示できる？？

akinoriosamura commented 6 years ago 
    // User modelとImage modelにfilenameを入れ、両者をヒモ付
    // filenameはランダムなハッシュ値などにし、独立性を高める
akinoriosamura commented 6 years ago

下記を参考に画像保存

https://qiita.com/gaaamii/items/27d27fb7685b39744416 https://saitoxu.io/2017/05/09/react-form-data.html http://uedatakeshi.hatenablog.com/entry/2017/06/02/143931

fileデータが保存されない

in server 

      rescue => e
        render json: {error: e.message}, status: 422

in front

        .then(response => {
          console.log('body:', response.data)
        })
        .catch( (response) => {
          console.error('error:', response);
        });

でエラー文獲得

エラー文

"Mysql2::Error: Data too long for column 'file'

小さいサイズの画像にて

error: ""\x89" from ASCII-8BIT to UTF-8"

akinoriosamura commented 6 years ago

t.binary :file, :limit => 500.kilobyte により全てのファイル保存可能に

akinoriosamura commented 6 years ago

画像送信・表示

https://qiita.com/gaaamii/items/27d27fb7685b39744416 を参考に

●画像の表示 https://qiita.com/Yarimizu14/items/f56123c738f12ad1844a を見るとajaxでバイナリを返すAPIをコールして結果を受け取れそう https://qiita.com/ksh-fthr/items/ba7c80252edad0e7c66c を見るとaxiosの場合、responseTypeをarraybufferにすれば良さそう 取得できた後は納村さんが教えてくれた https://qiita.com/komatzz/items/f2a25db16aca388845d3 を見るとバイナリとして変数に格納して、v-showを使えば表示できる？？

akinoriosamura commented 6 years ago

画像表示&保存の一般的な方法 by 五所さん

画像はS3に置いてDBにはそのURLを記載しています。（本当はS3のパスを直書きしないで、AWS CloudFrontなどのCDN経由で配信する方が、圧縮効率やレイテンシーの関係で速いんですが…） なので画像一覧は、URLをVue側に渡してあげて、imgタグのsrcにバインドしてます！

アップロードする際は、ただアップロードするなら、inputタグにrefで設定してアップロード時にFormDataに入れますね トリミングなどの処理をユーザーにさせる場合は、vue-cropperというライブラリで加工した後にBase64エンコードして文字列で送信、サーバー側でデコードして保存してます（本当はこれはあんまり良い方法ではないらしいが一番楽でした）

heroku + rails + S3

heroku + S3設定 https://qiita.com/ryuchan00/items/8e414562b7122e7ec4fb carrierwave set and view https://qiita.com/junara/items/1899f23c091bcee3b058 carrierwave + API └mount_uploaderには画像ファイルのカラムを適応 https://qiita.com/tporange/items/cfd03d93b26da544fdf3 https://blog.hello-world.jp.net/ruby/2289/

resize設定 http://www.workabroad.jp/tech/1118 https://railstutorial.jp/chapters/user_microposts?version=4.2#sec-image_upload_in_production

akinoriosamura commented 6 years ago

deploy時エラー

ArgumentError: Missing required arguments: aws_access_key_id, aws_secret_access_keyrails in export RAILS_ENV="test" export RACK_ENV="test" bundle exec rake db:create db:schema:load --trace

herokuの環境変数は、Rails.env.productionのとき使えるっぽく、Rails.env.testのときにエラーが出てしまっていました なので、Rails.env.productionのときのみaws使うようにしたら行けました

if Rails.env.production?
  CarrierWave.configure do |config|
    config.fog_credentials = {
      :provider => 'AWS',
      :region => ENV['S3_REGION'],
      :aws_access_key_id => ENV['S3_ACCESS_KEY'],
      :aws_secret_access_key => ENV['S3_SECRET_KEY']
    }

    # S3のパケット名
    config.fog_directory  = ENV['S3_BUCKET']
    config.cache_storage = :fog
  else
    config.asset_host = 'http://localhost:3000'
  end
end
  if Rails.env.production?
    storage :fog
  else
    storage :file
  end
akinoriosamura commented 6 years ago

carrierwave のprocess使用時エラー

ActiveRecord::RecordInvalid (Validation failed: Profile image Failed to manipulate with rmagick, maybe it is not an image?):

該当箇所

  include CarrierWave::RMagick
  process resize_to_limit: [400, 400]

in image_uploader.rb

対処法

https://github.com/minimagick/minimagick/issues/86 imagemagickを再インストールする際、6系インストール 7系をインストールした場合: brew switch imagemagick 6.9.1-4

imagemagickバージョン指定インストール https://qiita.com/ShuntaShirai/items/c582c0acebe2dbf03fc3