今天是臺灣升第三級警戒後,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沒有很多,有興趣的捧油可以參考我 前篇文章 有比較詳細的介紹🙂
讓我們開始吧!
- 輸入指令,建立一錄音檔的上傳器
$ 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.