前言

直至昨天，我們終於將 CRUD 的功能與頁面完成了，不過在新增 Events 資料的部分少了圖片上傳功能，圖片可以說是各個網站中，最重要的表現方式之一，絕對不可以缺，所以今天就來完成它吧！

檔案的資訊

就一開始建立的 EventsImage Model 來看，會儲存檔案的路徑、檔名、檔案大小：

1. 檔案路徑與檔名提供頁面在生成時，有來源依據來載入圖片檔
2. 檔案大小可以直接篩選出指定大小範圍的圖片檔，未來在控制空間可以比較便利

Repository

Events 的資料異動與圖片上傳雖然是分開運作的，不過都一樣是在做 CRUD，所以 EventsImage 也需要實作 Repository，完成 EventsImage 的 CRUD：

IEventsImageRepository

這次只會實作非同步的 Function。

EventsImageRepository

建立建構子，讓 DI 可以注入 DbContext：

實作新增資料到 Talbe: EventsImage 的功能：

EventsRepository

為了在新增活動時能同時新增圖片資料，所以在 EventsRepository 新增 AddEventWithEventsImageAsync 的 Function：

ViewModel

EventsCreateViewModel

為了要接收從 View 傳過來的檔案，需要建立一個 IFormFile 的 Property 來接收 HttpRequest 資料：

避免與 EventsBaseViewModel 的 EventsImage 搞混，所以命名為 FormEventsImage。

Services

EventsImageUploadService

專案新增一個 Services 的資料夾，將服務抽出來，不在 Controller, Model 等地方實作功能，也方便呼叫：

參數接收 EventsCreateViewModel 與 IWebHostEnvironment，IWebHostEnvironment 是為了取得現在的專案目錄路徑，提供檔案上傳的存放位置。

而回傳的部分是使用 Tuple 回傳多個 value，分別為：IFormFile IFormFile, String FileName, String FilePath。

內容實作檔案上傳的流程：

1. 會先檢查指定的資料夾是否存在，若否則新增資料夾；
2. 生成 GUID + "_" + 原檔案檔名作為存放的檔名
3. 上傳檔案到存放路徑

Controller

EventsController

1. 呼叫 EventsImageUploadService()，實體化 EventsImage 是因為 Events Model 的 EventsImage 型別為 ICollection，使用 ICollection 是為了讓一個活動資料可以上傳多張圖片，不過今天先做好單張圖片上傳。
2. 實體化 List，將 EventsImageModel 新增進去。
3. 進行 Mapping
4. 呼叫 AddEventWithEventsImageAsync() 來新增 Events 與 EventsImage 的資料

View

Events/Create.cshtml

在 form tag 的地方，加上 enctype="multipart/form-data"，讓 View 能接收檔案並傳給 Controller：
<form asp-action="Create" enctype="multipart/form-data">

加入 FormEventsImage 的 Tag：

本日結語

在 View 加入 enctype="multipart/form-data" 前，一直卡在檔案沒辦法傳到 Controller，查了 Stack Overflow 才知道要加入這段，算是一個容易忽略的地方。

Repository 寫得不太好，目前會有成功新增了 Events 資料，但 EventsImage 未成功上傳、新增的問題，待後續再改善了。

今天先完成檔案上傳的部分，明天再將圖片顯示在畫面上。

那麼我們明天見！

Reference

IFormfile in a view model is not binding