上課內容裡面有音檔可以使用,所以想要增加一個檔案上傳及播放的功能 :
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-11_16-33-17_990085-962x1024.png)
增加資料表 :
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-44-22_035535.png)
執行更新 EF
Scaffold-DbContext "Data Source=localhost;Initial Catalog=VocabularyDb;User ID=sa;Password=[你的密碼]" Microsoft.EntityFrameworkCore.SqlServer -OutputDir EFModels -f
WordPageViewModel 增加 CategoryFiles
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-47-15_283498.png)
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-46-23_481091.png)
在 WordService 修改 GetList
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-49-27_052566-1024x740.png)
前端部分,修改 ViewModel
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-51-17_815470.png)
在 words.component.ts 增加 method
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-52-10_324573.png)
在 words.component.html 增加播放區塊
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-16_03-52-59_870906-1024x379.png)
雖然還沒有上傳功能,但直接在資料庫新增可以撥放 :
![](https://blog.givemin5.com/wp-content/uploads/2021/04/image-2021-04-11_16-33-17_990085-962x1024.png)