前提・実現したいこと
アプリ開発に関しては全くの初心者です。
その中で、書籍の要約サイトの作成中です。
やりたいことは、書籍の画像をアップロードして、その画像を表示させることです。
画像についてはDBにバイナリデータとして保存。
発生している問題・エラーメッセージ
画像を表示するために、DBに登録されているバイナリデータを取得する処理で発生するエラー
NoMethodError (undefined method `[]=' for nil:NilClass):
該当のソースコード
vuejs
1//画像保存時のコード 2 dropFile(id) { 3 this.files = [...event.dataTransfer.files] 4 this.files.forEach(file => { 5 let form = new FormData() 6 form.append('file', file) 7 console.log(file) 8 axios.post(`http://localhost:3000/book_image/${id}`, form, { 9 headers: { 10 'content-type': 'multipart/form-data', 11 }, 12 }).then(response => { 13 console.log(response.data) 14 }).catch(error => { 15 console.log(error) 16 }) 17 }) 18 this.isEnter = true; 19 }, 20 21//画像取得時のコード 22 bookImageShow() { 23 axios 24 .get(`http://localhost:3000/book_image_show/20`, { 25 'responseType': 'arraybuffer', 26 'headers': { 27 'Content-Type': 'image/jpg' 28 } 29 }).then((response) => { 30 console.log(response) 31 }); 32 },
controller
1##画像保存時のコード 2 def book_image 3 @book = Book.find_by(id: params[:id]) 4 image = params[:file].tempfile.read 5 content_type = params[:file].content_type 6 @book.update(image: image,content_type: content_type) 7 head :no_content 8 end 9 10##画像取得時のコード 11 def book_image_show 12 book = Book.find_by(id: params[:id]) 13 image = book.image 14 send_data image, :type => 'image/jpeg', :disposition => 'inline' 15 end
試したこと
・まずpostgreDBにバイナリデータが保存されているのかの確認。保存時に
Parameters: {"file"=>#<ActionDispatch::Http::UploadedFile:0x000000000a699a60 @tempfile=#<Tempfile:C:/Users/user/AppData/Local/Temp/RackMultipart20210122-6604-17lhok9.jpg>, @original_filename="20200912163316.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"20200912163316.jpg\"\r\nContent-Type: image/jpeg\r\n">, "id"=>"20"}
となり、params[:file].tempfile.read、あるいはparams[:file].readでDB書き込み。
postgres上にはバイナリデータが保存。
次にid=20のbookテーブルのカラム:imageに保存されているバイナリデータをbook.imageで確認したところ、データは出力される。
しかしながら、controllerで動作させると、エラーメッセージが出力される。
推測
・バイナリデータがきちんとDBに格納されていない→調査方法が知りたい。
・DBに格納されているのであれば、なぜそこのデータを送ると
undefined method `[]=' for nil:NilClass となってしまうのか。→この場合は原因が知りたい
です。(調べても明らかにならなかったので、、、)
補足情報(FW/ツールのバージョンなど)
rails 6.0.3.4
ruby 2.7.2p137
postgres 13.1
vue.js 2.6.12
あなたの回答
tips
プレビュー