.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) {