我尝试使用带有实体框架的ASP.NET MVC将图像添加到数据库表。
我已经迁移了名为' AspNetUsers'的现有ASP.NET MVC表。并在其中添加了一些新列。
其中一列是ProfilePicture,它是byte []类型。
当我尝试注册新用户时,我希望该用户在其他数据中提供其个人资料图片。
这是具有新添加属性的ApplicationUser类:
public class ApplicationUsers : IdentityUser
{
public string Name { get; set; }
public string LastName { get; set; }
public string City { get; set; }
public string DateOfBirth { get; set; }
public byte[] ProfilePicture { get; set; }
public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUsers> manager)
{
// Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
// Add custom user claims here
return userIdentity;
}
}
要使用名为ExtendedIdentityModels的类包装器将图像放入表格中。该类继承自RegisterViewModel类,它只有一个属性UserProfilePicture,类型为HttpPostedFileBase,用于从用户页面获取图像。
public class ExtendedIdentityModels : RegisterViewModel
{
public HttpPostedFileBase UserProfilePicture { get; set; }
}
我已在控制器中更改了Register方法,以将此新属性添加到数据库中:
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Register(ExtendedIdentityModels model)
{
if (ModelState.IsValid)
{
if (model.UserProfilePicture != null)
{
if (model.UserProfilePicture.ContentLength > (4 * 1024 * 1024))
{
ModelState.AddModelError("CustomError", "Image can not be lager than 4MB.");
return View();
}
if (!(model.UserProfilePicture.ContentType == "image/jpeg" || model.UserProfilePicture.ContentType == "image/gif"))
{
ModelState.AddModelError("CustomError", "Image must be in jpeg or gif format.");
}
}
byte[] data = new byte[model.UserProfilePicture.ContentLength];
model.UserProfilePicture.InputStream.Read(data, 0, model.UserProfilePicture.ContentLength);
var user = new ApplicationUsers() { UserName = model.Email, Email = model.Email, Name = model.Name, LastName = model.LastName, City = model.City, DateOfBirth = model.DateOfBirth.ToString(), ProfilePicture = data };
var result = await UserManager.CreateAsync(user, model.Password);
if (result.Succeeded)
{
await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
return RedirectToAction("Index", "Home");
}
AddErrors(result);
}
// If we got this far, something failed, redisplay form
return View(model);
}
为了与用户交互,我使用以下View,在此代码的底部是添加ProfilePicture的部分。
@model StudentBookApp.Models.ExtendedIdentityModels
@{
ViewBag.Title = "Register";
}
@*<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>*@
<link href="~/Content/datepicker.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<h2>@ViewBag.Title.</h2>
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control " })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.City, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.City, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.DateOfBirth, new { @class = "datepicker form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ProfilePicture, new { @class = "col-md-2 control-label"})
<div class="col-md-10">
@Html.TextBoxFor(m => m.UserProfilePicture, new {type = "file"})
@Html.ValidationMessage("CustomMessage")
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
}
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker();
})
</script>
几乎一切顺利,但对于model.UserProfilePicture,我得到null值。出于某种原因,它无法从View传递。我做错了什么?我已经被困了几个小时试图找到可能的错误,但没有成功。这种机制&#39;将图像插入表中用于在MVC 4中正常工作...有人看到了我所遗漏的内容以及这种方法中的错误吗?
答案 0 :(得分:4)
与MVC或c#无关,它是HTML;)/ edit还要感谢您提出问题的所有细节,因为它非常彻底。
您的表单需要enctype =“multipart / form-data”
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype="multipart/form-data" }))
答案 1 :(得分:0)
public ActionResult AddImage(Brand model,HttpPostedFileBase image1)
{
var db = new H_Cloths_SaloonEntities();
if (image1!=null)
{
model.Brandimage = new byte[image1.ContentLength];
image1.InputStream.Read(model.Brandimage,0,image1.ContentLength);
}
db.Brands.Add(model);
db.SaveChanges();
ViewBag.Path = "image uploaded Successfully...!";
return View(model);
}