将图片上传到 IFormFile 到 ASP.NET Core MVC 项目

Question

我希望用户上传图片并将其保存在 IFomFile 中以便将其保存在数据库中。

产品控制器只有添加操作获取和发布、产品模型和添加新视图

产品控制器：

// this is the controler action add new get and post
public IActionResult AddNew()
{
    return View();
}

[HttpPost]
public IActionResult AddNew(ProductModel model)
{
    Product newProd = new Product
        {
            Titele = model.Titele,
            ShortDescrip = model.ShortDescrip,
            LongDescrip = model.LongDescrip,
            Price = model.Price,
            Date = DateTime.Now
        };

    if (model.FirstPic != null)
    {
        if (model.FirstPic.Length > 0)
        {
            using (var ms = new MemoryStream())
            {
                model.FirstPic.CopyTo(ms);
                newProd.FirstPic = ms.ToArray();
            }
        }
    }

    if (model.SecondPic != null)
    {
        if (model.SecondPic.Length > 0)
        {
            using (var ms = new MemoryStream())
            {
                model.SecondPic.CopyTo(ms);
                newProd.SecondPic = ms.ToArray();
            }
        }
    }

    if (model.ThirdPic != null)
    {
        if (model.ThirdPic.Length > 0)
        {
            using (var ms = new MemoryStream())
            {
                model.ThirdPic.CopyTo(ms);
                newProd.ThirdPic = ms.ToArray();
            }
        }
    }

    return Ok(newProd);
}

public class ProductModel
{
    public string Titele { get; set; }
    public string ShortDescrip { get; set; }
    public string LongDescrip { get; set; }
    public decimal Price { get; set; }
    public IFormFile FirstPic { get; set; }//pic
    public IFormFile SecondPic { get; set; }//pic
    public IFormFile ThirdPic { get; set; }//pic
}

这是cshtml视图

<form method="post">
    <div>
        <label asp-for="Titele" style="width:140px">Title:</label><br />
        <input asp-for=" Titele" placeholder="enter Title" />
    </div>
    <div>
        <label asp-for="ShortDescrip" style="width:140px">Short Description:</label><br />
        <input asp-for=" ShortDescrip" placeholder="enter Short Description" />
    </div>
    <div>
        <label asp-for="LongDescrip" style="width:140px">Long Description:</label><br />
        <textarea asp-for=" LongDescrip" placeholder="enter Short Description"style="width:140px" ></textarea>
    </div>
    <div>
        <label asp-for="Price" >Price:</label><br />
        <input asp-for=" Price" placeholder="enter price" type="number" min="0" step="0.1"/>
    </div>   
    <div>
        <label asp-for="FirstPic" style="width:140px">first pic:</label><br />
        <input asp-for=" FirstPic" placeholder="enter Pic" type="file" accept="image/*" />
        <span asp-validation-for="FirstPic"></span>
    </div>   
    <div>
        <label asp-for="SecondPic" style="width:140px">Second pic:</label><br />
        <input asp-for=" SecondPic" placeholder="enter Pic" type="file" accept=".png, .jpg" />
    </div>  
    <div>
        <label asp-for="ThirdPic" style="width:140px">Third pic:</label><br />
        <input asp-for=" ThirdPic" placeholder="enter Pic" type="file" accept=".png, .jpg" />
    </div>
    <div>
        <input type="submit" value="upload" />
    </div>
</form>

感谢所有帮助者 - 如果需要更多代码，请说

enter image description here 图片显示上传后它在 iromfile 上仍然为空

enter image description here上传图片

Answer 1

在 iromfile 上上传后仍然为空

如果您使用具有文件上传输入的 HTML 表单，则必须为您的 HTML 表单specify an encoding type (enctype) of multipart/form-data。

<form method="post" enctype="multipart/form-data">

更多信息请查看官方文档：https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-5.0#null-reference-exception-with-iformfile