c# - .Net Core MVC:尝试上传图像时控制器中出现 NullReferenceException
问题描述
我正在尝试添加一项功能,允许用户上传他们宠物的照片。我是 MVC 新手,正在使用本教程作为指导:https ://www.codaffection.com/asp-net-core-article/asp-net-core-mvc-image-upload-and-retrieve/
看法:
@model PetPhotoModel;
@{
ViewData["Title"] = "Upload A photo of your pet";
}
<div class="row">
<div class="col-md-4">
<form asp-action="UploadPhoto">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="PetName" class="control-label"></label>
<input asp-for="PetName" class="form-control" />
<span asp-validation-for="PetName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ImageFile" class="control-label"></label>
<input asp-for="ImageFile" accept="image/*" />
<span asp-validation-for="ImageFile" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="UploadPhoto" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
控制器(部分):
...
public IActionResult UploadPhoto()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> UploadPhoto([Bind("Id,PetName,Title,Description,ImageFile")] PetPhotoModel petPhotoModel)
{
if (ModelState.IsValid)
{
//Save image to wwwroot/image
string wwwRootPath = _hostEnvironment.WebRootPath;
string fileName = Path.GetFileNameWithoutExtension(petPhotoModel.ImageFile.FileName);
string extension = Path.GetExtension(petPhotoModel.ImageFile.FileName);
petPhotoModel.ImageName = fileName = fileName + DateTime.Now.ToString("yymmssfff") + extension;
string path = Path.Combine(wwwRootPath + "/Image/", fileName);
using (var fileStream = new FileStream(path, FileMode.Create))
{
await petPhotoModel.ImageFile.CopyToAsync(fileStream);
}
//GetLoggedInUser() gets the current user by id from the db context
GetLoggedInUser().Uploads.Add(petPhotoModel);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(petPhotoModel);
}
...
UserModel
包含一个集合,以便PetPhotoModel
在数据库中创建一对多关系:
public virtual ICollection<PetPhotoModel> Uploads { get; set; }
宠物照片模型:
public class PetPhotoModel
{
private DateTime _dateUploaded = DateTime.Now;
public int Id { get; set; }
[Required]
public string PetName { get; set; }
[Required]
public string Title { get; set; }
public string Description { get; set; }
[Column(TypeName = "nvarchar(100)")]
[DisplayName("Image Name")]
public string ImageName { get; set; }
[NotMapped]
[DisplayName("Upload File")]
public IFormFile ImageFile { get; set; }
public DateTime DateUploaded
{
get { return _dateUploaded; }
set { _dateUploaded = value; }
}
...
问题是在按下提交按钮后,尽管图像已上传到视图中,但控制器根本没有从视图中获取任何有关图像的数据:
[
解决方案
当表单包含任何类型的文件元素时,您必须使用“multipart/form-data”编码。由于默认编码是“application/x-www-form-urlencoded”,请将您视图中的表单标记更改为:
<form asp-action="UploadPhoto" enctype="multipart/form-data" method="post">
推荐阅读
- kubernetes - configmap配置java_opts参数后,k8s总是报错参数;
- postgresql - PostgreSQL 12.3:错误:查询结果内存不足
- elasticsearch - Elasticsearch - 根据尚未索引的新记录中的值更新已索引的多个记录的字段
- mysql - Mysql - 是否可以在非 JSON 列类型上运行 JSON 函数
- powershell - PowerShell Windows Froms:一致的 GUI
- macos - Catalina 中的 SSH 隧道以使用屏幕共享 (VNC)
- javascript - Javascript结合正则表达式模式保留正则表达式结果
- sql - 如何对放置在 2 个不同服务器中的两个不同表进行查询
- r - 循环遍历 R 中的字符串变量名
- python - 加速随机加权选择而不用在 python 中替换