[學習筆記] Carrierwave 上傳 MP3

2021-05-17
Rails

今天是臺灣升第三級警戒後,work from home 的第一天。

為了可以在專案中實現上傳 mp3 的功能,原本試著研究 ActiveStorage 或 Paperclip ,最後還是選擇了老當益壯的 Carrierwave 啦!

題外話:
ActiveStorage
是近年出道的套件,因為比較新,所以網路可參考的文章偏少,當然程度好一點的朋友還是可以透過閱讀 README 實作~

Paperclip (迴紋針)也可以上傳檔案,不過…官方卻說棄用了?而且建議使用 ActiveStorage 🤭(??)

總之,由於大多數的 Carrierwave 相關文章都是介紹圖片上傳的功能,為了要上傳音檔,花了不少時間在調查&研究 😶‍🌫️
特別感謝以下兩篇參考文章~所以放在最前面 🙇🏻‍♂️

參考文章:
1. http://johnliutw.logdown.com/posts/3280338
2. https://stackoverflow.com/questions/62425443/audio-file-doesnt-play-in-safarimediarecorder-rails-carrierwave-s3

那我們就去參考他們的文章就好吧🙃(疑?

我實作這功能時,是接續原本的專案,所以實際敲的指令還有新增的code沒有很多,有興趣的捧油可以參考我 前篇文章 有比較詳細的介紹🙂

讓我們開始吧!

  1. 輸入指令,建立一錄音檔的上傳器 $ rails g uploader Recording

2. 系統自動生成檔案:app/uploaders/recording_uploader.rb 在這個檔案裡面,由於我要上傳到 AWS S3
所以我只有反註解 storage :fog 而已
(也許某天我會寫一篇新增AWS S3的文章,嗯也許)

3. 建立 migration,讓 album 的資料庫可以增加 recording
$ rails g migration add_recording_to_album recording:string

4. 修改 Models: app/models/album.rb

class Album < ActiveRecord::Base
mount_uploader :recording, RecordingUploader
end

// 讓 album 掛載(mount) 上傳 recording 的功能

5. 修改: views/albums/new.html.erb

新增頁面多一行,才會在頁面上看到

<%= f.input :recording, as: :file, label: “新增音檔 MP3” %>

6. 修改:views/albums/show.html.erb

在頁面上就會顯示播放器的工具囉!第一次看到的時候真的蠻感動的🥲

上述五點都已完成的話,就可以試著 $ rails s 來試試看上傳的功能囉!

以上就是我的實作心得分享,希望大家都可以實作成功~
如果有講錯或遺漏的地方歡迎留言跟我說
覺得不錯的話也可以給我一個 👏🏼 鼓勵鼓勵 😊

最後一起為台灣祈禱吧 🙏 希望兩週後解決疫情第三級警戒

台灣加油,同島一命!

Thanks for the time & wish you a nice day.


留言: