ASP.NET Core中實現(xiàn)高效的文件上傳的示例代碼

更新時間：2025年05月30日 10:19:53 作者：江沉晚呤時

文件上傳功能常常是必不可少的,本文主要介紹了ASP.NET Core中實現(xiàn)高效的文件上傳的示例代碼,具有一定的參考價值,感興趣的可以了解一下

在現(xiàn)代的 Web 應(yīng)用中，文件上傳功能常常是必不可少的。在 ASP.NET Core 中，處理文件上傳相對簡單，且可以靈活地配置與定制。本文將介紹如何在 ASP.NET Core 中實現(xiàn)文件上傳功能，包括基本的文件上傳、限制文件大小、文件類型驗證等。

1. 創(chuàng)建 ASP.NET Core 項目

首先，確保你已經(jīng)安裝了 .NET SDK。如果沒有，訪問官方文檔下載安裝。

接下來，可以使用以下命令來創(chuàng)建一個新的 ASP.NET Core Web API 項目：

dotnet new webapi -n FileUploadExample
cd FileUploadExample

此命令會創(chuàng)建一個基于 Web API 的項目，我們可以在此項目中實現(xiàn)文件上傳功能。

2. 配置文件上傳

2.1 配置 Startup.cs

在 ASP.NET Core 3.0 及以上版本，項目的配置都在 Program.cs 文件中，而不是傳統(tǒng)的 Startup.cs 文件。

首先，打開 Program.cs 文件，并確保添加了以下配置：

var builder = WebApplication.CreateBuilder(args);

// 配置文件上傳大小限制
builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 10 * 1024 * 1024; // 設(shè)置文件上傳大小限制為 10MB
});

var app = builder.Build();

// 配置 HTTP 請求管道
app.UseHttpsRedirection();
app.MapControllers();
app.Run();

2.2 創(chuàng)建文件上傳控制器

然后，在 Controllers 目錄下創(chuàng)建一個新的控制器 FileUploadController.cs。這個控制器將處理文件上傳的業(yè)務(wù)邏輯。

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");
            }

            // 保存文件到服務(wù)器指定路徑
            var filePath = Path.Combine(Directory.GetCurrentDirectory(), "UploadedFiles", file.FileName);

            // 確保目標(biāo)目錄存在
            Directory.CreateDirectory(Path.GetDirectoryName(filePath));

            // 保存文件
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }

            return Ok(new { FilePath = filePath });
        }
    }
}

代碼解析：

文件大小限制：通過檢查 file.Length 來判斷文件的大小是否超過指定的最大限制。我們設(shè)定文件大小限制為 5MB。
文件類型驗證：通過文件的擴展名判斷文件類型，只允許上傳 .jpg, .jpeg, 和 .png 格式的圖片文件。
保存文件：將文件保存在服務(wù)器本地，文件保存在 UploadedFiles 文件夾中。你可以根據(jù)需求修改保存路徑。
返回響應(yīng)：上傳成功后，返回文件的存儲路徑。

2.3 測試上傳接口

現(xiàn)在，我們可以啟動項目并測試文件上傳接口。在命令行中運行：

dotnet run

啟動項目后，可以使用 Postman 或其他 API 測試工具發(fā)送一個 POST 請求到：

http://localhost:5000/api/fileupload/upload

并將一個文件作為 file 參數(shù)上傳。如果上傳成功，你將收到類似下面的響應(yīng)：

{
    "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. 前端實現(xiàn)

在前端，你可以使用表單來上傳文件。下面是一個簡單的 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>

代碼解析：