使用 IFormFile 在 ASP.NET Core 3.1 或 5.0 中上传单个或多个文件

示例代码:https://download.youkuaiyun.com/download/hefeng_aspnet/90139355 

介绍

在本文中,我们将了解如何在 ASP.NET core Web 应用程序中上传文件并将其存储在应用程序的根目录中。我们将使用 IFormFile 上传文件,并了解如何通过文件传递其他数据。

什么是 IFormFile

ASP.NET Core 引入了 IFormFile 接口,该接口表示 HTTP 请求中传输的文件。该接口使我们能够访问 ContentDisposition、ContentType、Length、FileName 等元数据。IFormFile 还提供了一些用于存储文件的方法。IFormFile 接口还允许我们通过可访问的 Stream 读取文件的内容。

创建 Asp.Net Core 项目

步骤1.打开Visual Studio并单击创建新项目。

第 2 步。选择 ASP.Net Core Web App (MVC) 并单击下一步按钮。 

步骤3.在下一个屏幕中,输入以下详细信息,然后单击下一步按钮。

  • 项目名称
  • 您要存储项目的位置

步骤4.在下一个屏幕中,配置其他详细信息或保留默认设置,然后单击创建按钮。

步骤 5.现在我们的项目已创建完毕。现在我们将为我们的操作创建一个新的控制器。

要添加新的控制器,请右键单击“控制器”文件夹,然后单击“添加”,再单击“控制器”。

从左侧过滤器中选择控制器,然后选择 MVC 控制器 - 空,并单击添加按钮。然后输入控制器名称并单击添加按钮。

步骤6.现在我们必须在 Models 文件夹中创建一个模型,我们将使用它来将数据从视图传递到控制器。

这里我们创建了如下所示的三个模型

响应模型

这个模型包含三个属性,分别是IsResponse、IsSuccess和Message。这个模型会被另外两个继承,我们用它来作为执行某些操作后的响应状态和消息。

public class ReponseModel
{
    public string Message { get; set; }
    public bool IsSuccess { get; set; }
    public bool IsResponse { get; set; }
}

单一文件模型

我们将使用此模型一次上传一个文件。此模型包含两个属性,FileName,我们将在服务器上存储文件时将其用作文件名。另一个是 File,它是一种 IFormFile 类型。这两个属性都具有数据必需注释属性,用于向用户显示验证。

public class SingleFileModel : ReponseModel
{
    [Required(ErrorMessage = "Please enter file name")]
    public string FileName { get; set; }
    [Required(ErrorMessage = "Please select file")]
    public IFormFile File{ get; set; }
}

多文件模型

我们将使用此模型一次存储多个文件。此模型仅包含一个属性,即 IFormFile 列表类型。

public class MultipleFilesModel : ReponseModel
{
   [Required(ErrorMessage = "Please select files")]
    public List<IFormFile> Files { get; set; }
}

上传单个文件

步骤 1.创建单个文件上传的视图。在这里我为此使用了索引操作方法。从索引中,我们将模型 SingleFileModel 传递给视图,以便在视图端访问其属性。

public IActionResult Index()
{
    SingleFileModel model = new SingleFileModel();
    return View(model);

要添加视图,请右键单击操作方法,然后单击添加视图。

然后从左侧过滤器中选择“View”,并选择“Razor View – Empty”。然后单击“添加”按钮。

第 2 步。根据您的要求为您的视图创建设计。这里我使用一个简单的设计,如下面的代码所示。

@model UploadFile.Models.SingleFileModel

@{
    ViewData["Title"] = "Single File Upload";

}
<form asp-action="Upload" asp-controller="Upload" method="post" enctype = "multipart/form-data">
    @if (Model.IsResponse)
    {
        if (Model.IsSuccess)
        {
            <div class="alert alert-success">
                @Model.Message
            </div>
        }
        else
        {
            <div class="alert alert-danger">
                @Model.Message
            </div>
        }
    }
    <div class="row mt-2">
        <div class="col-12">
            <label class="col-form-label">Enter File Name For Save</label>
            <input asp-for="FileName" class="form-control" />
            <span asp-validation-for="FileName" class="text-danger"></span>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-12">
            <label class="col-form-label">Select File</label>
            <input asp-for="File" class="form-control" />
            <span asp-validation-for="File" class="text-danger"></span>
        </div>
    </div>


    <div class="row mt-2">
        <div class="col-12">
            <button type="submit" class="btn btn-success">Upload File</button>
        </div>
    </div>
</form>

解释

  • 正如您在上面的代码片段中看到的,我创建了一个带有 post 方法的表单,并将其重定向到 Upload 控制器和 Upload Action 方法。
  • 这里我们将表单数据(文件)与其他数据一起传递,因此我们在表单标签中添加了 enctype =“multipart/form-data”属性。
  • 我们还为提交类型添加了一个按钮,将我们的表单提交给给定的操作方法。
  • 这里还使用了我们的响应模型,用于在 Bootstrap 的警报组件中显示成功和错误消息,根据 IsSuccess 属性,分别为成功和危险。

 步骤3.创建将文件存储到服务器上的post方法。

[HttpPost]
public IActionResult Upload(SingleFileModel model)
{
    if (ModelState.IsValid)
    {
        model.IsResponse = true;

        string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/Files");

        //create folder if not exist
        if (!Directory.Exists(path))
            Directory.CreateDirectory(path);

        //get file extension
        FileInfo fileInfo = new FileInfo(model.File.FileName);
        string fileName = model.FileName + fileInfo.Extension;

        string fileNameWithPath = Path.Combine(path, fileName);

        using (var stream = new FileStream(fileNameWithPath, FileMode.Create))
        {
            model.File.CopyTo(stream);
        }
        model.IsSuccess = true;
        model.Message = "File upload successfully";
    }
    return View("Index", model);
}

解释

  • 正如您在上面的代码中看到的,我们创建了一个名为 Upload 的 post 方法,它接受 SingleFileModel 作为参数。
  • 然后我们使用 ModelState.Valid 属性检查我们的模型是否有效。如果模型有效,则转到下一个操作,返回视图并显示验证消息。
  • 接下来,我们创建一个名为 path 的变量,它包含我们要存储文件的根目录路径。 
  • 在单个文件上传中,我们存储一个以用户输入的名称命名的文件,因此这里我们使用文件信息获取文件的扩展名并创建一个新的文件名。
  • 然后我们创建一个用于文件创建的流并使用 IFormFile 的复制方法将传入的文件复制到其中并将成功消息传递给视图。

输出(显示验证)

输出(文件上传后的成功消息) 

输出(服务器目录中的文件) 

上传多个文件

步骤 1.在控制器中添加新的操作方法,如下面的代码所示。这里我们在视图中传递 MultipleFilesModel。 

public IActionResult MultiFile()
{
    MultipleFilesModel model = new MultipleFilesModel();
    return View(model);

第 2 步。根据您的要求在视图中添加设计。 

@model UploadFile.Models.MultipleFilesModel

@{
    ViewData["Title"] = "Multi File Upload";

}
<form asp-action="MultiUpload" asp-controller="Upload" method="post" enctype="multipart/form-data">
    @if (Model.IsResponse)
    {
        if (Model.IsSuccess)
        {
            <div class="alert alert-success">
                @Model.Message
            </div>
        }
        else
        {
            <div class="alert alert-danger">
                @Model.Message
            </div>
        }
    }

    <div class="row mt-2">
        <div class="col-12">
            <label class="col-form-label">Select Multiple Files</label>
            <input asp-for="Files" class="form-control" multiple/>
            <span asp-validation-for="Files" class="text-danger"></span>
        </div>
    </div>


    <div class="row mt-2">
        <div class="col-12">
            <button type="submit" class="btn btn-success">Upload Files</button>
        </div>
    </div>
</form>

解释

  • 如上所示,此视图与单个文件上传视图几乎相同。但在这里,我们只使用了一个控件,即文件上传,并在 input 标签中添加了多个属性,这使我们能够选择多个文件。
  • 另外,我们将表单发布到不同的方法,该方法具有上传多个文件的逻辑。

步骤3.在控制器端创建一个动作方法,用于一次存储多个文件。

[HttpPost]
public IActionResult MultiUpload(MultipleFilesModel model)
{
    if (ModelState.IsValid)
    {
        model.IsResponse = true;
        if (model.Files.Count > 0)
        {
            foreach (var file in model.Files)
            {

                string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/Files");

                //create folder if not exist
                if (!Directory.Exists(path))
                    Directory.CreateDirectory(path);


                string fileNameWithPath = Path.Combine(path, file.FileName);

                using (var stream = new FileStream(fileNameWithPath, FileMode.Create))
                {
                    file.CopyTo(stream);
                }
            }
            model.IsSuccess = true;
            model.Message = "Files upload successfully";
        }
        else
        {
            model.IsSuccess = false;
            model.Message = "Please select files";
        }
    }
    return View("MultiFile", model);
}

解释

  • 正如您在上面的代码中看到的,我们创建了一个名为 MultiUpload 的 post 方法,它将 MultipleFilesModel 作为参数。
  • 首先,我们检查 ModelState 是否有效。
  • 然后我们检查 List<IFormFile> 的文件属性是否有一个或多个文件。
  • 然后使用 for each 循环迭代所有文件。在此循环中,与单个文件上传代码相同,我们存储文件,但在这里,我们使用文件本身的名称作为文件名,而不是用户输入。
  • 此后,在我们的响应模型属性中返回成功消息并返回到 MultiFile 视图。
  • 最后,我还在布局文件中为这两个视图添加了一个菜单。以便于在这两个视图之间轻松导航。您可以根据需要进行操作。

输出(显示验证)

输出(选择文件)

输出(服务器目录中的文件)

结论

就是这样。这就是我们使用 IFormFile 在 asp.net core 中上传和存储单个或多个文件到服务器的方法。希望您觉得这很有用并能得到一些帮助。

如果您喜欢此文章,请收藏、点赞、评论,谢谢,祝您快乐每一天。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hefeng_aspnet

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值