asp.net - 显示数据库中保存为字节的 IFormFile 的图像
问题描述
这是我在 ASP.NET CORE 3.0 中的代码,当我使用类型将图像保存为视图模型中的 IFormFile 和模型中的字节时。现在我想在编辑方法中检索这个图像。我无法显示图像。这是我的代码
var formData = new Student()
{
AppUserID = userId,
FirstName = model.FirstName,
MatricMarks = model.MatricMarks,
CollegeName = model.CollegeName,
HSSCMarks = model.HSSCMarks,
};
if (model.Profile != null && model.Profile.FileName != "" && model.Profile.FileName != null)
{
IFormFile file = model.Profile;
if (file.Length > 0)
//Convert Image to byte and save to database
{
using (var stream = new MemoryStream())
{
await file.OpenReadStream().CopyToAsync(stream);
formData.Profile = stream.ToArray();
}
}
}
视图模型
public class StudentSignUpViewModel
{
public string Username { get; set; }
public string CollegeName { get; set; }
public string HSSCMarks { get; set; }
public IFormFile Profile { get; set; }
}
这是模型类
public string MatricMarks { get; set; }
public string CollegeName { get; set; }
public string HSSCMarks { get; set; }
[Required]
public byte[] Profile { get; set; }
这是我试图显示图像的 Edit[GET] 方法,请指导出了什么问题
public IActionResult Edit(int? id)
{
StudentSignUpViewModel model = new StudentSignUpViewModel();
if (id == null)
{
return NotFound();
}
var student = _context.Students.Where(x => x.StudentId == id.Value).Include(x=>x.AppUser).FirstOrDefault();
model.MatricMarks = student.MatricMarks;
model.CollegeName = student.CollegeName;
model.HSSCMarks = student.HSSCMarks;
model.CoursesArray = student.Courses;
var base64 = Convert.ToBase64String(student.Profile);
ViewBag.imgSrc = string.Format("data:image/jpg;base64,{0}",model.Profile, base64);
}
查看我尝试显示图像的方法
<div class="form-group">
<img src="@ViewBag.imgSrc" class="profile-user-img img-responsive img-circle" alt="User profile picture" />
<label asp-for="Username" class="control-label"></label>
<input asp-for="Username" class="form-control" />
注意:不相关的代码被删除。
解决方案
要使用 base64 字符串显示二进制图像,请修改您的代码如下。
var base64 = Convert.ToBase64String(student.Profile);
ViewBag.imgSrc = string.Format("data:image/jpg;base64,{0}", base64);
此外,您还可以将这些图像文件保存在您的 Web 服务器上,而不是将它们存储在数据库中,以便您的应用程序可以直接将这些图像提供给客户端。
有关提供静态文件的更多信息,请查看:https ://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-3.1
推荐阅读
- vimeo-api - Vimeo Player.js cuepoints Uncaught TypeError: Time must be a number:
- javascript - 为什么以及何时异步代码是非阻塞的?
- json - ReactJS 从自定义 API 获取数据并渲染数据
- node.js - 带有 Passport JWT 的 Apollo 服务器
- javascript - 如何使用 tensorflowjs_converter 转换 TensorFlow 图 .pb 文件?
- laravel - laravel中html形式的更新方法
- kubernetes - Traefik 中的多个路径指向 Kubernetes 后端的相同路径
- android - Webview 没有在棉花糖设备下面显示一些像数学符号这样的文本
- c++11 - 将指针内容复制到堆栈变量
- android - 如何将数据从活动传递到类