iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
自我挑戰組

用 30 天和 ASP.NET Core 打造一個活動報名管理系統系列 第 20

ASP.NET Core - 活動報名管理系統:Day20 圖片上傳功能

  • 分享至 

  • xImage
  •  

前言

直至昨天,我們終於將 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 資料:

避免與 EventsBaseViewModelEventsImage 搞混,所以命名為 FormEventsImage

Services

EventsImageUploadService

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

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

而回傳的部分是使用 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


上一篇
ASP.NET Core - 活動報名管理系統:Day19 將 CRUD 的前後端寫好 - 2
下一篇
ASP.NET Core - 活動報名管理系統:Day21 將已上傳的圖片顯示在頁面上
系列文
用 30 天和 ASP.NET Core 打造一個活動報名管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言