ASP.NET Core中实现高效的文件上传的示例代码
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1. 创建 ASP.NET Core 项目</a></li><li><a href="#_label1">2. 配置文件上传</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_0">2.1 配置 Startup.cs</a></li><li><a href="#_lab2_1_1">2.2 创建文件上传控制器</a></li><li><a href="#_lab2_1_2">2.3 测试上传接口</a></li></ul><li><a href="#_label2">3. 处理多文件上传</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_3">3.1 修改 FileUploadController 以支持多文件上传</a></li></ul><li><a href="#_label3">4. 前端实现</a></li><ul class="second_class_ul"></ul><li><a href="#_label4">5. 小结</a></li><ul class="second_class_ul"></ul></ul></div><p>在现代的 Web 应用中，文件上传功能常常是必不可少的。在 ASP.NET Core 中，处理文件上传相对简单，且可以灵活地配置与定制。本文将介绍如何在 ASP.NET Core 中实现文件上传功能，包括基本的文件上传、限制文件大小、文件类型验证等。</p><p class="maodian"><a name="_label0"></a></p><h2>1. 创建 ASP.NET Core 项目</h2>
<p>首先，确保你已经安装了 .NET SDK。如果没有，访问 <a href="https://dotnet.microsoft.com/download/dotnet" rel="external nofollow" target="_blank">官方文档</a> 下载安装。</p>
<p>接下来，可以使用以下命令来创建一个新的 ASP.NET Core Web API 项目：</p>
<div class="jb51code"><pre class="brush:csharp;">dotnet new webapi -n FileUploadExample
cd FileUploadExample
</pre></div>
<p>此命令会创建一个基于 Web API 的项目，我们可以在此项目中实现文件上传功能。</p>
<p class="maodian"><a name="_label1"></a></p><h2>2. 配置文件上传</h2>
<p class="maodian"><a name="_lab2_1_0"></a></p><h3>2.1 配置 Startup.cs</h3>
<p>在 ASP.NET Core 3.0 及以上版本，项目的配置都在 <code>Program.cs</code> 文件中，而不是传统的 <code>Startup.cs</code> 文件。</p>
<p>首先，打开 <code>Program.cs</code> 文件，并确保添加了以下配置：</p>
<div class="jb51code"><pre class="brush:csharp;">var builder = WebApplication.CreateBuilder(args);
// 配置文件上传大小限制
builder.Services.Configure<FormOptions>(options =>
{
options.MultipartBodyLengthLimit = 10 * 1024 * 1024; // 设置文件上传大小限制为 10MB
});
var app = builder.Build();
// 配置 HTTP 请求管道
app.UseHttpsRedirection();
app.MapControllers();
app.Run();
</pre></div>
<p class="maodian"><a name="_lab2_1_1"></a></p><h3>2.2 创建文件上传控制器</h3>
<p>然后，在 <code>Controllers</code> 目录下创建一个新的控制器 <code>FileUploadController.cs</code>。这个控制器将处理文件上传的业务逻辑。</p>
<div class="jb51code"><pre class="brush:csharp;">using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;
namespace FileUploadExample.Controllers
{
")]
public class FileUploadController : ControllerBase
{
// 上传文件的 API
public async Task<IActionResult> UploadFile(IFormFile file)
{
if (file == null || file.Length == 0)
{
return BadRequest("未选择文件");
}
// 限制文件类型（例如只允许上传 .jpg 和 .png 文件）
var allowedExtensions = new[] { ".jpg", ".jpeg", ".png" };
var extension = Path.GetExtension(file.FileName).ToLowerInvariant();
if (!allowedExtensions.Contains(extension))
{
return BadRequest("只允许上传 JPG 和 PNG 格式的文件");
}
// 限制文件大小（例如文件大小不能超过 5MB）
if (file.Length > 5 * 1024 * 1024)
{
return BadRequest("文件大小不能超过 5MB");
}
// 保存文件到服务器指定路径
var filePath = Path.Combine(Directory.GetCurrentDirectory(), "UploadedFiles", file.FileName);
// 确保目标目录存在
Directory.CreateDirectory(Path.GetDirectoryName(filePath));
// 保存文件
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
return Ok(new { FilePath = filePath });
}
}
}
</pre></div>
<p>代码解析：</p>
<ul><li><p><strong>文件大小限制</strong>：通过检查 <code>file.Length</code> 来判断文件的大小是否超过指定的最大限制。我们设定文件大小限制为 5MB。</p></li><li><p><strong>文件类型验证</strong>：通过文件的扩展名判断文件类型，只允许上传 <code>.jpg</code>, <code>.jpeg</code>, 和 <code>.png</code> 格式的图片文件。</p></li><li><p><strong>保存文件</strong>：将文件保存在服务器本地，文件保存在 <code>UploadedFiles</code> 文件夹中。你可以根据需求修改保存路径。</p></li><li><p><strong>返回响应</strong>：上传成功后，返回文件的存储路径。</p></li></ul>
<p class="maodian"><a name="_lab2_1_2"></a></p><h3>2.3 测试上传接口</h3>
<p>现在，我们可以启动项目并测试文件上传接口。在命令行中运行：</p>
<div class="jb51code"><pre class="brush:csharp;">dotnet run
</pre></div>
<p>启动项目后，可以使用 Postman 或其他 API 测试工具发送一个 <code>POST</code> 请求到：</p>
<div class="jb51code"><pre class="brush:plain;">http://localhost:5000/api/fileupload/upload
</pre></div>
<p>并将一个文件作为 <code>file</code> 参数上传。如果上传成功，你将收到类似下面的响应：</p>
<div class="jb51code"><pre class="brush:plain;">{
"filePath": "D:\\netcore\\example.jpg"
}
</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>3. 处理多文件上传</h2>
<p>除了单文件上传，你可能还需要支持多文件上传。ASP.NET Core 同样支持这个功能，方法也很简单。</p>
<p class="maodian"><a name="_lab2_2_3"></a></p><h3>3.1 修改 FileUploadController 以支持多文件上传</h3>
<div class="jb51code"><pre class="brush:csharp;">
public async Task<IActionResult> UploadMultipleFiles(IFormFile[] files)
{
if (files == null || files.Length == 0)
{
return BadRequest("未选择任何文件");
}
foreach (var file in files)
{
// 限制文件类型
var allowedExtensions = new[] { ".jpg", ".jpeg", ".png" };
var extension = Path.GetExtension(file.FileName).ToLowerInvariant();
if (!allowedExtensions.Contains(extension))
{
return BadRequest("只允许上传 JPG 和 PNG 格式的文件");
}
// 限制文件大小
if (file.Length > 5 * 1024 * 1024)
{
return BadRequest("文件大小不能超过 5MB");
}
// 保存文件
var filePath = Path.Combine(Directory.GetCurrentDirectory(), "UploadedFiles", file.FileName);
Directory.CreateDirectory(Path.GetDirectoryName(filePath));
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
}
return Ok(new { Message = "文件上传成功" });
}
</pre></div>
<p>代码解析：</p>
<ul><li><p><strong>多文件上传</strong>：通过 <code>IFormFile[] files</code> 接收多个文件。</p></li><li><p>每个文件都会进行相同的类型验证和大小限制。</p></li><li><p>所有文件都将保存到 <code>UploadedFiles</code> 文件夹中。</p></li></ul>
<p class="maodian"><a name="_label3"></a></p><h2>4. 前端实现</h2>
<p>在前端，你可以使用表单来上传文件。下面是一个简单的 HTML 表单，允许用户选择并上传多个文件：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
</head>
<body>
<h2>上传文件</h2>
<form id="fileUploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" multiple />
<button type="submit">上传</button>
</form>
<script>
document.getElementById('fileUploadForm').addEventListener('submit', function(event) {
event.preventDefault();
let formData = new FormData();
let files = document.getElementById('fileInput').files;
for (let i = 0; i < files.length; i++) {
formData.append('files', files);
}
fetch('http://localhost:5000/api/fileupload/upload-multiple', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert('上传成功：' + JSON.stringify(data));
})
.catch(error => {
alert('上传失败：' + error.message);
});
});
</script>
</body>
</html>
</pre></div>
<p>代码解析：</p>
<ul><li><p><strong>FormData</strong>：<code>FormData</code> 对象允许你轻松地将表单数据（包括文件）发送到服务器。</p></li><li><p>使用 <code>fetch</code> 发送文件数据到 <code>upload-multiple</code> API。</p></li></ul>
<p class="maodian"><a name="_label4"></a></p><h2>5. 小结</h2>
頁:
[1]