iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

從實作學習ASP.NET Core - 30天的購物網站系列 第 9

【從實作學習ASP.NET Core】Day09 | 後台 | 圖片上傳與預覽

接續昨天的 Create 頁面,今天要完成圖片上傳和預覽的功能


圖片上傳到資料庫的方法據我所知有兩種方法:

  1. 如果你的圖片儲存在磁碟上,或是存在網路空間,可以資料庫欄位中以字串保存圖片的路徑
  2. 直接把圖片以二進位型態儲存在資料庫中

這邊以第二種方法為例,直接把圖片轉成二進位存進資料庫

圖片上傳

前端會用 <input type="file" name="myimg" /> 作為圖片檔案上傳的欄位
( 如果是用表單<form>的話,要注意編碼為 enctype="multipart/form-data",才能正確上傳檔案 )

<div class="form-group">
    <label asp-for="Image" class="control-label"></label>
    <input type="file" name="myimg" id="myimg" class="form-control-file">
    <span asp-validation-for="Image" class="text-danger"></span>
</div>

後端用 IFormFile myimg 來接收欄位的檔案,並且用 MemoryStream.ToArray() 把檔案轉成位元組陣列,
詳細用法如下:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Product product, IFormFile myimg)
{
    if (ModelState.IsValid)
    {
        if (myimg != null)
        {
            using (var ms = new MemoryStream())
            {
                myimg.CopyTo(ms);
                product.Image = ms.ToArray();
            }
        }
        _context.Add(product);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    ViewData["Categories"] = new SelectList(
        _context.Set<Category>(), "Id", "Name", product.CategoryId);
    return View(product);
}

圖片預覽

圖片預覽是一讀取到檔案就要在前端動態呈現的
所以這邊會需要用上javascript來實現預覽圖片的功能
並用一個<img>欄位來顯示預覽的圖片

<img id="preview" style="max-height:200px;" />

<script>
    $('#myimg').on('change', function (e) {
        const file = this.files[0];
        const objectURL = URL.createObjectURL(file);    // 使用 createObjectURL 產生圖片url
        $('#preview').attr('src', objectURL);
    });
</script>

最後看一下成果


上一篇
【從實作學習ASP.NET Core】Day08 | 後台 | 新增商品類別
下一篇
【從實作學習ASP.NET Core】Day10 | 後台 | 文字編輯器 CKEditor
系列文
從實作學習ASP.NET Core - 30天的購物網站30

1 則留言

0
wesleybabytw
iT邦新手 5 級 ‧ 2021-10-18 09:57:06

請問圖片無法存入資料庫欄位,是什麼原因呢?有少寫程式或是設定缺漏嗎?

另外,圖片預覽要加以下程式才能正常。
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Yeh iT邦新手 4 級 ‧ 2021-10-18 19:07:03 檢舉

感謝補充!jQuery 在 MVC 專案建立的時候會自動加入,所以忽略掉了

Yeh iT邦新手 4 級 ‧ 2021-10-18 19:17:31 檢舉

無法存入資料庫是程式有報錯嗎? 還是存入後變成null?
如果是用表單<form>的話,要注意編碼為 enctype="multipart/form-data"

<form asp-action="Create" enctype="multipart/form-data">
</form>

對,試過之後是這個原因沒錯。

我要留言

立即登入留言