時間不多了，今天就先寫一個圖片上傳功能

詳細程式碼可以到 GitHub 看

首先先建立一個在 AdminController 加上一個 UploadImage Action

public IActionResult UploadImage()
{
    return View();
}

再來對 UploadImage 按右鍵 新增檢視，我們選擇空白範本

在 cshtml 中，我們手動加上需要的元素，一個 form 裡面包一個 input 與 submit。

圖檔上傳 form 編碼要選擇為 multipart/form-data

input 的 type 設定為 file ，並且指定上傳格式 image/*

<h1>UploadImage</h1>

<hr />
<div class="row">
    <div class="col-md-8">
        <form asp-action="UploadImage" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class=""></div>
            <input type="file" id="image" name="image" accept="image/*" />
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index" asp-controller="Home">回到首頁</a>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

其中上傳成功後，回傳的網址，我這邊偷懶用模型驗證的錯誤訊息 asp-validation-summary 來顯示

<div asp-validation-summary="ModelOnly" class=""></div>

做完的話，畫面應該會是這樣

接下來作後端接受圖片的 Action [HttpPost] UploadImage。

圖片儲存在主機電腦中，需要知道存在存在電腦上的實體路徑，例如:D:/website/myblog
需注入 IWebHostEnvironment 來幫助我們取得路徑

private readonly IWebHostEnvironment _webHostEnvironment;

public AdminController(IPostService postService, IWebHostEnvironment webHostEnvironment)
{
    _postService = postService;
    _webHostEnvironment = webHostEnvironment;
}

我們使用 _webHostEnvironment.WebRootPath 來取得專案內預設存放靜態檔案 wwwroot 目錄的位置

並檢查該目錄下有沒有 image 資料夾，沒有的話就新增 image 資料夾

並用 Path.GetExtension() 取得檔案的副檔名，重新命名後，寫入到 image 資料夾的路徑下

寫入後，重新組成網頁路徑

• HttpContext.Request.Scheme : http 或 https
• HttpContext.Request.Host : 當前網站 Domain

在 ASP.NET Core 中，放在wwwroot/123.txt 的靜態檔案，就可以用 你的網站domain/123.txt 取得

最後，我們把組合出來的網址，偷懶用模型驗證的錯誤訊息來傳遞 XD

[HttpPost]
public async Task<IActionResult> UploadImage(IFormFile image)
{
    if (image != null && image.Length > 0)
    {
        var imagePath = Path.Combine(_webHostEnvironment.WebRootPath, "image");
        if (!Directory.Exists(imagePath))
        {
            Directory.CreateDirectory(imagePath);
        }

        var extenrsion = Path.GetExtension(image.FileName);
        var fileName = $"{Guid.NewGuid()}{extenrsion}";

        using (var stream = System.IO.File.Create($"{imagePath}/{fileName}"))
        {
            await image.CopyToAsync(stream);
        }

        var webPath = $"{HttpContext.Request.Scheme}://{HttpContext.Request.Host}/image/{fileName}";

        ModelState.AddModelError("", webPath);
    }

    return View();
}

上傳後結果：

詳細程式碼可以到 GitHub 看