IFormFile 上传图片 ASP.NET 核心 MVC

Question

很抱歉打扰你们，但我有一个问题我不知道如何解决，我已经浏览了几天并尝试不同的解决方案。

所以我正在建立一个网站，当用户可以将他的个人图像上传为图片配置文件时，我想在其中实现用户部分。

这是我提出的问题，当我运行代码时，它总是返回为空。

这是我的控制器：

[HttpPost]
    public async Task<IActionResult> Create(EmployeeCreateViewModel model)
    {

        if (ModelState.IsValid)
        {


            string uniqueFileName = null;
            if(model.Photo != null)
            {
                string uploadsFolder = Path.Combine(_hostingEnvironment.WebRootPath, "EmpImg");
                uniqueFileName = Guid.NewGuid().ToString() + "_" + model.Photo.FileName;
                using(var fs = new FileStream(Path.Combine(uploadsFolder, uniqueFileName), FileMode.Create))
                {
                    await model.Photo.CopyToAsync(fs);
                }


            }
            Employee newEmployee = new Employee
            {
                Name = model.Name,
                Surname = model.Surname,
                Email = model.Email,
                Area = model.Area,
                PhotoPath = uniqueFileName
            };
            _employeeRepository.Add(newEmployee);
            return RedirectToAction("details", new { id = newEmployee.Id });
        }

        return View();

    }

这是我的观点

<form enctype="multipart/form-data" asp-controller="Employee" asp-action="create" method="post">

    <div class="form-group row">
        <label asp-for="Name" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Name" class="form-control" placeholder="Name..." />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Surname" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Surname" class="form-control" placeholder="Surname..." />
            <span asp-validation-for="Surname" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Email" class="form-control" placeholder="Email..." />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Area" class="col-sm-2 col-form-label">Location:</label>
        <div class="col-sm-10">
            <select asp-for="Area" class="custom-select mr-sm-2" asp-items="Html.GetEnumSelectList<Area>()">
                <option value="">Please Select..</option>
            </select>
            <span asp-validation-for="Area" class="text-danger"></span>

        </div>
    </div>

    <div class="form-group row">
        <label asp-for="Photo" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <div class="custom-file">
                <input asp-for="Photo" name="Create" class="form-control custom-file-input" />
                <label class="custom-file-label">Choose File...</label>
            </div>
        </div>
    </div>

    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group row">
        <div class="col-sm-2">
            <button type="submit" class="btn btn-primary">Create</button>
        </div>
    </div>
    @section Scripts {
    <script>
        $(document).ready(function () {
            $('.custom-file-input').on("change", function () {
                var fileName = $(this).val().split("\\").pop();
                $(this).next('.custom-file-label').html(fileName);
            });
        });
    </script>
    }
</form>

当我尝试在浏览器中上传 img 时，它不会抛出任何异常，它只是不会将图像上传到数据库并且该列是 NULL。

提前感谢大家的任何帮助或建议。

Answer 1

在您的Create 视图中，您为Photo 字段添加了额外的name="Create"，这会导致模型绑定失败。您需要将名称与模型的字段名称匹配。

从以下代码更改

<div class="form-group row">
    <label asp-for="Photo" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
        <div class="custom-file">
            <input asp-for="Photo" name="Create" class="form-control custom-file-input" />
            <label class="custom-file-label">Choose File...</label>
        </div>
    </div>
</div>

到

<div class="form-group row">
    <label asp-for="Photo" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
        <div class="custom-file">
            <input asp-for="Photo" class="form-control custom-file-input" />
            <label class="custom-file-label">Choose File...</label>
        </div>
    </div>
</div>

型号：

public class EmployeeCreateViewModel
{

    public string Name { get; set; }
    public string Surname { get; set; }
    public string Email { get; set; }
    public string Area { get; set; }
    public IFormFile Photo { get; set; }
}