如何使用 MVC 中的表单上传图像 ASP.NET

Question

我知道那里有很多教程，但我无法理解它们，因为它们只是在发布代码时解释不佳，而且 HttpPostedFileBase 一旦我将其添加到我的模型类项目中就会破坏我的项目，项目停止使用以下 erorr：

值不能为空。

参数名称：实体集

.我想向图像的 Movies 模型添加一个外键，并创建一个新的模型图像并通过它添加图片。

电影模型：

public class Movie
{
public int Id { get; set; }
[Required]
public string Name { get; set; }
public Genre Genre { get; set; }
[Display(Name = "Genre")]
public int GenreId { get; set; }
[Required]
public DateTime DateAdded { get; set; }
[Required]
[Display(Name = "Release Date")]
public DateTime DateReleased { get; set; }
[Required]
[Display(Name = "Number in Stock")]
[Range(1, 20)]
public int Stock { get; set; }
public int? ImageId { get; set; }
public Image ImageModel { get; set; }
}

图像模型：

public class Image
{
public int Id { get; set; }
[Required]
public string UrlOfImage { get; set; }
}

影片保存控制器：

public ActionResult Save(Movie movie)
{
if (ModelState.IsValid)
{
if (movie.Id == 0)
{
movie.DateAdded = DateTime.Now;
_context.Movies.Add(movie);
}
else
{
var movieInDb = _context.Movies.Single(m => m.Id == movie.Id);
movieInDb.Name = movie.Name;
movieInDb.GenreId = movie.GenreId;
movieInDb.Stock = movie.Stock;
movieInDb.DateReleased = movie.DateReleased;
}
_context.SaveChanges();
return RedirectToAction("Index", "Movies");
}
var viewModel = new NewMovieViewModel(movie)
{
Genres = _context.Genres.ToList()
};
ModelState.Clear();
return View("MovieForm", viewModel);
}

新电影视图模型

public class NewMovieViewModel
{
public IEnumerable<Genre> Genres { get; set; }
public int? Id { get; set; }
[Required]
[StringLength(255)]
public string Name { get; set; }
[Display(Name = "Genre")]
[Required]
public int? GenreId { get; set; }
[Display(Name = "Release Date")]
[Required]
public DateTime? DateReleased { get; set; }
[Display(Name = "Number in Stock")]
[Range(1, 20)]
[Required]
public int? Stock { get; set; }
public int? ImageId { get; set; }
public Image Image { get; set; }
public string Title
{
get
{
return Id != 0 ? "Edit Movie" : "New Movie";
}
}
public NewMovieViewModel()
{
Id = 0;
}
public NewMovieViewModel(Movie movie)
{
Id = movie.Id;
Name = movie.Name;
DateReleased = movie.DateReleased;
Stock = movie.Stock;
GenreId = movie.GenreId;
ImageId = movie.ImageId;
}
}

Answer 1

你可以试试这个。

您的视图应如下所示：

@using(Html.BeginForm("UploadFile","Upload", FormMethod.Post, new { 
enctype="multipart/form-data"}))  
{ 
<div>  
@Html.TextBox("file", "", new {  type= "file"}) <br />  
<input type="submit" value="Upload" />  
@ViewBag.Message  
</div>      
}

控制器应如下所示：

[HttpPost]  
publicActionResultUploadFile(HttpPostedFileBase file)  
{  
try  
{  
if (file.ContentLength > 0)  
{  
string _FileName = Path.GetFileName(file.FileName);  
string _path = Path.Combine(Server.MapPath("~/UploadedFiles"), _FileName);  
file.SaveAs(_path);  
}  
ViewBag.Message = "File Uploaded Successfully!!";  
return View();  
}  
catch  
{  
ViewBag.Message = "File upload failed!!";  
return View();  
}  
}  

Answer 2

这个想法是将 blob 数据单独保存在某个 blob 存储中，调用应该是异步的。它将是完全独立的调用，并且可能针对特定的 blob 容器。

无论您的页面是面向管理员还是面向用户都无关紧要。 为了提供良好的用户体验，您希望在用户选择容器中的图像后立即上传图像并取回 URL，您将将其保存在元数据表中。

或者，您可以允许首先保存所有数据，然后指导用户在记录中更新/添加图像。

还需要考虑如何批量保存数据(普通数据和 blob 数据(。 在移动设备的情况下，执行这些相同操作的更好方法是什么？ 顺便说一下，现在我们应该始终首先从移动客户端的角度思考。

希望这会有所帮助。

Answer 3

你应该在你的方法中定义参数 HttpPostedFileBase

public Action Save(Movie movie, HttpPostedFileBase image)

在您看来，您应该有一个名称为"图像"的输入

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