Lưu hình ảnh trực tiếp vào database trong ASP.NET Core MVC

Khi lưu các hình ảnh của project, cách các bạn thường dùng là lưu các tệp ảnh vào wwwroot, nhưng đôi lúc không phải lúc nào cũng vậy, và với bài hướng dẫn hôm nay, mình sẽ hướng dẫn các bạn lưu hình ảnh trực tiếp vào database bằng cách mã hóa chúng.

Ở bài hướng dẫn này, các bạn có thể lấy chúng từ SQL Server với việc sử dụng Entity Framework Core và ASP.NET Core. Ok cùng bắt đầu nhé!

Tiến hành

Bước 1: Trước tiên, bạn cần Thiết kế cơ sở dữ liệu (database) và tổ chức với bảng sau:

create database DbStoreImage
go
use DbStoreImage
go
create table [Image]
(
 Id       int identity(1,1) primary key,
 ImageTitle   nvarchar(500),
 ImageData   varbinary(max),
 ImagePath   nvarchar(500)
)

Bước 2: Tạo project ASP.NET Core Web Application với tên là StoreImage.Demo

Bước 3: Chọn Web Application (Model - View - Controller).

Bước 4: Cài đặt các NuGet Package sau trong StoreImage.Demo:

• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.Relational
• Microsoft.EntityFrameworkCore.SqlServer
• Microsoft.EntityFrameworkCore.Tools

Bước 5: Thêm Connection Strings trong appsetting.json:

"ConnectionStrings": {
    "ConnectionString": "Server=CNPM-PC\\SQLEXPRESS;Database=DbStoreImage;Trusted_Connection=True;MultipleActiveResultSets=true"
  },

Bạn cần đổi tên Server trên thành tên Server của bạn trong SQL Server.

Bước 6: Vào Tools > NuGet Package Manager > Package Manager Console:

Sau đó nhập command như dưới:

Scaffold-DbContext "Server=CNPM-PC\SQLEXPRESS;Database= DbStoreImage; user id= sa;password= 123;Trusted_Connection=True;MultipleActiveResultSets=true" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

Bước 7: Trong Startup.cs tìm đến phương thức ConfigureServices() và thêm code sau bên trong phương thức:

services.AddDbContext<DbStoreImageContext>(options =>
            options.UseSqlServer(
                Configuration.GetConnectionString("ConnectionString")));

Bước 8: Trong Controllers/HomeController.cs sửa thành code sau:

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using StoreImage.Demo.Models;
using System;
using System.IO;
using System.Linq;

namespace StoreImage.Demo.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        DbStoreImageContext db = new DbStoreImageContext();
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult UploadImage()
        {
            foreach (var file in Request.Form.Files)
            {
                Image img = new Image();
                img.ImageTitle = file.FileName;

                MemoryStream ms = new MemoryStream();
                file.CopyTo(ms);
                img.ImageData = ms.ToArray();

                ms.Close();
                ms.Dispose();

                db.Image.Add(img);
                db.SaveChanges();
            }
            ViewBag.Message = "Image(s) stored in database!";
            return View("Index");
        }
        [HttpPost]
        public ActionResult RetrieveImage()
        {
            Image img = db.Image.OrderByDescending (i => i.Id).SingleOrDefault();
            string imageBase64Data = Convert.ToBase64String(img.ImageData);
            string imageDataURL = string.Format("data:image/jpg;base64,{0}", imageBase64Data);
            ViewBag.ImageTitle = img.ImageTitle;
            ViewBag.ImageDataUrl = imageDataURL;
            return View("Index");
        }
    }
}

Bước 9: Trong Views/Home/Index.cshtml sửa code sau:

@{
    ViewData["Title"] = "Home Page";
}
<span>@ViewBag.Message</span>

<span>@ViewBag.ImageTitle</span>
<img src="@ViewBag.ImageDataUrl" />

<form asp-action="UploadImage" asp-controller="Home" method="post" enctype="multipart/form-data" class="mb-3">
    <input type="file" id="file1" name="file1" multiple="multiple" />
    <button class="btn btn-primary" type="submit">Upload File(s)</button>
</form>
<form asp-action="RetrieveImage" asp-controller="Home" method="post">
    <button class="btn btn-secondary" type="submit">Show Latest Image</button>
</form>

Và như vậy là xong, hãy chạy lên và thử nghiệm nhé!

Nguồn tham khảo: http://www.binaryintellect.net/articles/2f55345c-1fcb-4262-89f4-c4319f95c5bd.aspx

Mong bài viết hữu ích với bạn, chúc các bạn thành công.

By Hiếu Quốc

Có lẽ bạn thích?