c# - 如何在 ASP.NET Core 中上传文件？

Question

如何使用带有某些模型数据的 ASP.NET MVC 6 上传文件或图像？

例如，我有这样一个表单:

<form>
    <input type="file">
    <input type="text" placeholder="Image name...">
    <input type="text" placeholder="Image description...">
    <input type="submit" value="Submit">
</form>

我阅读了很多关于如何上传的教程，但我没有看到任何像上面的表格那样上传的数据。

此外，是否有与 Codeigniter 图像处理类相同的图像处理库，用于调整大小和图像水印？ ( https://codeigniter.com/user_guide/libraries/image_lib.html

Answer 1

您可以将类型为 IFormFile 的新属性添加到您的 View 模型

public class CreatePost
{
   public string ImageCaption { set;get; }
   public string ImageDescription { set;get; }
   public IFormFile MyImage { set; get; }
}

在您的 GET 操作方法中，我们将创建此 View 模型的对象并发送到 View 。

public IActionResult Create()
{
   return View(new CreatePost());
}

现在，在我们的 View 模型中强类型化的创建 View 中，有一个 form 标签，其 enctype 属性设置为 "multipart/form-数据”

@model CreatePost
<form asp-action="Create" enctype="multipart/form-data">   

    <input asp-for="ImageCaption"/>
    <input asp-for="ImageDescription"/>
    <input asp-for="MyImage"/>

    <input type="submit"/>
</form>

还有你的 HttpPost 操作来处理表单发布

[HttpPost]
public IActionResult Create(CreatePost model)
{
   var img = model.MyImage;
   var imgCaption = model.ImageCaption;

   //Getting file meta data
   var fileName = Path.GetFileName(model.MyImage.FileName);
   var contentType = model.MyImage.ContentType;

   // do something with the above data
   // to do : return something
}

如果你想将文件上传到你的应用程序中的某个目录，你应该使用 IHostingEnvironment 来获取 webroot 路径。这是一个工作示例。

public class HomeController : Controller
{
    private readonly IHostingEnvironment hostingEnvironment;
    public HomeController(IHostingEnvironment environment)
    {
        hostingEnvironment = environment;
    }
    [HttpPost]
    public IActionResult Create(CreatePost model)
    {
        // do other validations on your model as needed
        if (model.MyImage != null)
        {
            var uniqueFileName = GetUniqueFileName(model.MyImage.FileName);
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
            var filePath = Path.Combine(uploads,uniqueFileName);
            model.MyImage.CopyTo(new FileStream(filePath, FileMode.Create)); 

            //to do : Save uniqueFileName  to your db table   
        }
        // to do  : Return something
        return RedirectToAction("Index","Home");
    }
    private string GetUniqueFileName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return  Path.GetFileNameWithoutExtension(fileName)
                  + "_" 
                  + Guid.NewGuid().ToString().Substring(0, 4) 
                  + Path.GetExtension(fileName);
    }
}

这会将文件保存到应用程序 wwwwroot 目录内的 uploads 文件夹，并使用使用 Guids 生成的随机文件名(以防止覆盖同名文件)

这里我们使用了一个非常简单的 GetUniqueName 方法，它将 guid 中的 4 个字符添加到文件名的末尾，以使其具有一定的独特性。您可以根据需要更新该方法，使其更加复杂。

您是否应该将上传图片的完整 url 存储在数据库中？

没有。不要将图像的完整 url 存储在数据库中。如果明天您的公司决定将您的公司/产品名称从 www.thefacebook.com 更改为 www.facebook.com 怎么办？现在你必须修复表中的所有 url!

您应该存储什么？

您应该存储上面生成的唯一文件名(我们上面使用的 uniqueFileName 变量)来存储文件名。当你想显示图像时，你可以使用这个值(文件名)并构建图像的 url。

例如，您可以在您的 View 中执行此操作。

@{
    var imgFileName = "cats_46df.png";
}
<img src="~/uploads/@imgFileName"  alt="my img"/>

我只是将图像名称硬编码到 imgFileName 变量并使用它。但是您可以从数据库中读取存储的文件名并将其设置为您的 View 模型属性并使用它。有点像

<img src="~/uploads/@Model.FileName"  alt="my img"/>

将图片存储到表中

如果你想将文件保存为 bytearray/varbinary 到你的数据库，你可以像这样将 IFormFile 对象转换为字节数组

private byte[] GetByteArrayFromImage(IFormFile file)
{
    using (var target = new MemoryStream())
    {
        file.CopyTo(target);
        return target.ToArray();
    }
}

现在在您的 http post 操作方法中，您可以调用此方法从 IFormFile 生成字节数组并使用它保存到您的表中。下面的示例尝试使用 Entity Framework 保存一个 Post 实体对象。

[HttpPost]
public IActionResult Create(CreatePost model)
{
    //Create an object of your entity class and map property values
    var post=new Post() { ImageCaption = model.ImageCaption };

    if (model.MyImage != null)
    {
       post.Image =  GetByteArrayFromImage(model.MyImage);
    }
    _context.Posts.Add(post);
    _context.SaveChanges();
    return RedirectToAction("Index","Home");
}