ASP.NET Core中实现高效的文件上传的示例代码
作者:江沉晚呤时
在现代的 Web 应用中,文件上传功能常常是必不可少的。在 ASP.NET Core 中,处理文件上传相对简单,且可以灵活地配置与定制。本文将介绍如何在 ASP.NET Core 中实现文件上传功能,包括基本的文件上传、限制文件大小、文件类型验证等。
1. 创建 ASP.NET Core 项目
首先,确保你已经安装了 .NET SDK。如果没有,访问 官方文档 下载安装。
接下来,可以使用以下命令来创建一个新的 ASP.NET Core Web API 项目:
dotnet new webapi -n FileUploadExample cd FileUploadExample
此命令会创建一个基于 Web API 的项目,我们可以在此项目中实现文件上传功能。
2. 配置文件上传
2.1 配置 Startup.cs
在 ASP.NET Core 3.0 及以上版本,项目的配置都在 Program.cs
文件中,而不是传统的 Startup.cs
文件。
首先,打开 Program.cs
文件,并确保添加了以下配置:
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();
2.2 创建文件上传控制器
然后,在 Controllers
目录下创建一个新的控制器 FileUploadController.cs
。这个控制器将处理文件上传的业务逻辑。
using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System.IO; using System.Threading.Tasks; namespace FileUploadExample.Controllers { [Route("api/[controller]")] [ApiController] public class FileUploadController : ControllerBase { // 上传文件的 API [HttpPost("upload")] 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 }); } } }
代码解析:
文件大小限制:通过检查
file.Length
来判断文件的大小是否超过指定的最大限制。我们设定文件大小限制为 5MB。文件类型验证:通过文件的扩展名判断文件类型,只允许上传
.jpg
,.jpeg
, 和.png
格式的图片文件。保存文件:将文件保存在服务器本地,文件保存在
UploadedFiles
文件夹中。你可以根据需求修改保存路径。返回响应:上传成功后,返回文件的存储路径。
2.3 测试上传接口
现在,我们可以启动项目并测试文件上传接口。在命令行中运行:
dotnet run
启动项目后,可以使用 Postman 或其他 API 测试工具发送一个 POST
请求到:
http://localhost:5000/api/fileupload/upload
并将一个文件作为 file
参数上传。如果上传成功,你将收到类似下面的响应:
{ "filePath": "D:\\netcore\\example.jpg" }
3. 处理多文件上传
除了单文件上传,你可能还需要支持多文件上传。ASP.NET Core 同样支持这个功能,方法也很简单。
3.1 修改 FileUploadController 以支持多文件上传
[HttpPost("upload-multiple")] 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 = "文件上传成功" }); }
代码解析:
多文件上传:通过
IFormFile[] files
接收多个文件。每个文件都会进行相同的类型验证和大小限制。
所有文件都将保存到
UploadedFiles
文件夹中。
4. 前端实现
在前端,你可以使用表单来上传文件。下面是一个简单的 HTML 表单,允许用户选择并上传多个文件:
<!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[i]); } 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>
代码解析:
FormData:
FormData
对象允许你轻松地将表单数据(包括文件)发送到服务器。使用
fetch
发送文件数据到upload-multiple
API。
5. 小结
到此这篇关于ASP.NET Core中实现高效的文件上传的示例代码的文章就介绍到这了,更多相关ASP.NET Core文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!