base64字符串在web前端显示

最新推荐文章于 2025-02-18 11:05:06 发布

原创最新推荐文章于 2025-02-18 11:05:06 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#c#

Asp.Net MVC 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了将图片转换为base64字符串并存储在数据库中的应用场景，比如防止图片被爬取。文章中作者分享了C#中生成base64编码的代码，并提供了在Web前端展示base64图片的示例。

最近进行中的某一个项目要求把图片保存成base64存到数据库，以前做web项目一般是保存到文件服务器或者当前服务器的一个目录，我想了想保存成base64位到数据库有什么好处？防止别人运用工具爬取到你服务器上面的图片？

说到这里我先分享下我保存的代码。

[HttpPost]
        public async Task<IActionResult> UpLoadImg()
        {
            var date = Request;
            var files = Request.Form.Files;
            long size = files.Sum(f => f.Length);
            string webRootPath = _webHostEnvironment.WebRootPath;

            string newFileName = "";
            String base64 = "";
            foreach (var formFile in files)
            {
                if (formFile.Length > 0)
                {

                    string fileExt = System.IO.Path.GetExtension(formFile.FileName); //文件扩展名，不含“.”
                    long fileSize = formFile.Length; //获得文件大小，以字节为单位
                    if (fileSize > 50 * 1024)
                    {

                    }
                    else
                    {

                    }
                    newFileName = System.Guid.NewGuid().ToString()  + fileExt; //随机生成新的文件名
                    var filePath = webRootPath + "\\upload\\" + newFileName;
                    
                    using (var stream = new FileStream(filePath, FileMode.Create))
                    {

                        await formFile.CopyToAsync(stream);
                        
                    }
                    base64 = Base64Helper.ImageToBase64(filePath);
                    long id = 186063175114821632;
                    
                    TData<StaffEntity> obj = await staffBLL.GetEntity(id);
                    StaffEntity entity = obj.Result;
                    entity.FaceImage = base64;
                    TData<string> obj2 = await staffBLL.SaveForm(entity);

                }
            }
            return Json(new { code = 0,msg="上传成功", data =new { src= "data:image/gif;base64," + base64 } });

        }

显示图片的例子为了方便大家看我自己用新页面拆解出来了显示base64编码图片的办法

@{
    ViewData["Title"] = "ImageShow";
}

<img src="" id="image" />


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $.ajax({
        type: "post",
        url: "/DemoManage/Form/GetImage",
        dataType: "Json",
        success: function (data) {
            console.log(data)
            $("#image").attr("src", "data:image/gif;base64," + data.url);
        }

    });

</script>