.NET Core上传保存图片

在现代的Web应用程序中,图片上传是一个常见的需求。在.NET Core中,我们可以使用各种方法来实现图片上传和保存。本文将介绍一种常见的方法,并提供对应的代码示例。

准备工作

在开始编写代码之前,首先确保你已经安装了.NET Core SDK。你可以在命令行中运行dotnet --version来验证安装情况。

另外,我们还需要使用一些NuGet包来帮助我们实现图片上传功能。打开你的项目文件(通常是.csproj文件)并添加以下包引用:

```xml
<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Http" Version="2.2.0" />
  <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.2.0" />
</ItemGroup>

运行`dotnet restore`命令来安装这些包。

## 文件上传控制器

首先,我们需要创建一个控制器来处理文件上传请求。在你的控制器文件中,添加以下代码:

```markdown
```csharp
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using System.Threading.Tasks;

namespace YourNamespace.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UploadController : ControllerBase
    {
        private readonly IHostingEnvironment _hostingEnvironment;

        public UploadController(IHostingEnvironment hostingEnvironment)
        {
            _hostingEnvironment = hostingEnvironment;
        }

        [HttpPost]
        public async Task<IActionResult> Upload(IFormFile file)
        {
            try
            {
                if (file == null || file.Length == 0)
                {
                    return BadRequest("No file selected.");
                }

                var uploadsFolder = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
                if (!Directory.Exists(uploadsFolder))
                {
                    Directory.CreateDirectory(uploadsFolder);
                }

                var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
                var filePath = Path.Combine(uploadsFolder, fileName);

                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }

                return Ok(new { fileName });
            }
            catch (Exception ex)
            {
                return StatusCode(500, $"Internal server error: {ex}");
            }
        }
    }
}

上述代码中,我们创建了一个名为`UploadController`的控制器,并添加了一个`Upload`动作方法来处理文件上传请求。该方法接收一个`IFormFile`类型的参数,该参数代表上传的文件。

在方法中,我们首先检查文件是否为空,并创建一个用于存储上传文件的文件夹。然后,我们生成一个随机的文件名,并将文件保存到指定的路径。

最后,我们返回一个包含文件名的JSON响应。

## 配置路由

接下来,我们需要在`Startup.cs`文件中配置路由。找到`ConfigureServices`方法并添加以下代码:

```markdown
```csharp
public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
    services.AddSingleton<IHostingEnvironment>(x => x.GetRequiredService<IHttpContextAccessor>().HttpContext.RequestServices.GetRequiredService<IHostingEnvironment>());
}

上述代码中,我们添加了一些服务依赖项,以便在控制器中使用。

然后,在`Configure`方法中添加路由配置代码:

```markdown
```csharp
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //...

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });

    //...
}

## 编写前端页面

最后,我们需要创建一个简单的前端页面来上传图片。创建一个HTML文件,并添加以下代码:

```markdown
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image Upload</title>
</head>
<body>
    Image Upload
    <form>
        <input type="file" id="fileInput" />
        <button type="button" onclick="uploadImage()">Upload</button>
    </form>

    <script>
        function uploadImage() {
            var fileInput = document.getElementById('fileInput');
            var file = fileInput.files[0];

            var formData = new FormData();
            formData.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/api/upload', true);
            xhr.onload = function () {
                if (xhr.status === 200) {