【从实作学习ASP.NET Core】Day09 | 後台 | 图片上传与预览

接续昨天的 Create 页面，今天要完成图片上传和预览的功能

图片上传到资料库的方法据我所知有两种方法：

如果你的图片储存在磁碟上，或是存在网路空间，可以资料库栏位中以字串保存图片的路径
直接把图片以二进位型态储存在资料库中

这边以第二种方法为例，直接把图片转成二进位存进资料库

图片上传

前端会用 <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>

最後看一下成果