如何在 Razor Pages 中显示图像/照片表单数据库答案

【问题标题】：How to display Image/Photo form database in Razor Pages如何在 Razor Pages 中显示图像/照片表单数据库
【发布时间】：2021-08-28 23:46:39
【问题描述】：

如何显示我保存在我的 sql 数据库中的照片。

这就是我保存照片的方式：

图像.cs

public class Image
{
    [Key]
    public int Id { get; set; }
    public string ImageTitle { get; set; }
    public byte[] ImageData { get; set; }
}

创建.cshtml.cs

[BindProperty]
public BufferedSingleFileUploadDb FileUpload { get; set; }

 public async Task<IActionResult> OnPostUploadAsync()
    {
        using (var memoryStream = new MemoryStream())
        {
            await FileUpload.FormFile.CopyToAsync(memoryStream);

            // Upload the file if less than 2 MB
            if (memoryStream.Length < 2097152)
            {
                var file = new Image()
                {
                    ImageData = memoryStream.ToArray()
                };

                _db.Image.Add(file);

                await _db.SaveChangesAsync();
            }
            else
            {
                ModelState.AddModelError("File", "The file is too large.");
            }
        }

        return Page();
    }

public class BufferedSingleFileUploadDb
    {
        [Required]
        [Display(Name = "File")]
        public IFormFile FormFile { get; set; }
    }

现在我需要 Index.cshtml.cs 和 Index.cshtml 中的哪些代码来显示这张保存照片？

【问题讨论】：

已回答，它是否可以解决您的问题或以任何方式帮助您？

标签： c# asp.net razor razor-pages

【解决方案1】：

我通常将图像上传到服务器的文件夹中，并将图像路径保存在数据库中。不建议将整个图像的字节存储在数据库中。
为表单中的图像创建输入。

<input type="file" accept="image/*" name="file"/>

在表单中添加 enctype。

 @using (Html.BeginForm("AddImage", "Controllername", FormMethod.Post,
     new { enctype = "multipart/form-data" }))

在您的视图中添加 `[HttpPost] 用于发布表单提交和参数。

[HttpPost]
public ActionResult AddImage(HttpPostedFileBase file){

并添加此代码。

//Checking if the file isn't null
if (file != null)
{
    //Getting File Name
    string pic = System.IO.Path.GetFileName(file.FileName);
    //Getting MapPath of server's folder where image have to be saved
    //Like in this images folder have all other folder of each items having multiple images
    string path2 = Server.MapPath("~/images/" + newItem.id);
    //Checking if the path exists if not then create
    if (!Directory.Exists(path2))
    {
        //Creating Images
        Directory.CreateDirectory(path2);
    }
    //Combining path Server's path and image name
    string path = System.IO.Path.Combine(path2, pic);
    //Saving the file
    file.SaveAs(path);
}

每次我将图像上传到具有唯一项目 ID 的单独图像文件夹中。希望你能得到这个想法。
但是在获取图像时，您可以在 razor 页面中执行此操作，获取此唯一 id 文件夹中的所有图像并获取它。

@{
    //Getting Server Path with item's unique id
    string strDirectory = Server.MapPath((@"~/CategoryImages/" + category.id + "/"));

    //Get all files on the directory and store it on string array
    string[] strFiles = Directory.GetFiles(strDirectory);
    
    string strFileName = string.Empty;

    //Loop on each file and attach it on img tag
    foreach (var strFile in strFiles)
    {
        //Getting File Name
        strFileName = Path.GetFileName(strFile);
        //Displaying it
        <img src="@Url.Content("~/CategoryImages/"+category.id+"/"+strFileName)" class="img-fluid" />

    }
}

此方法不会在数据库中保存任何字节，从而使数据库更加高效。此外，此方法还允许您存储一个项目或实体的多个图像。

【讨论】：