# ASP.Net 上传图片并生成高清晰缩略图
在ASP.Net中，上传图片并生成高清晰的缩略图是一项常见的需求，本文将详细介绍如何实现这一功能，包括前端页面设计、后端代码实现以及相关配置，我们将使用ASP.Net MVC框架进行开发。
## 一、准备工作
### 1.1 安装必要的NuGet包
我们需要安装一些NuGet包来帮助我们处理图片上传和缩略图生成，打开Visual Studio的NuGet包管理器，搜索并安装以下包：
`System.Drawing.Common`: 用于图像处理。
`Microsoft.AspNetCore.Http`: 用于处理HTTP请求和响应。
### 1.2 创建ASP.Net MVC项目
打开Visual Studio，选择“创建新项目”，然后选择“ASP.Net Core Web应用程序”，在创建项目向导中，选择“MVC”模板，点击“创建”。
## 二、前端页面设计
在项目中创建一个视图，用于上传图片，在`Views/Home`文件夹下创建一个名为`Index.cshtml`的文件，内容如下：
```html
@{
ViewBag.Title = "Upload Image";
Upload Image
```
这个简单的表单允许用户选择一个文件并提交到服务器。
## 三、后端代码实现
### 3.1 控制器代码
在`Controllers`文件夹下创建一个名为`HomeController.cs`的文件，内容如下：
```csharp
using Microsoft.AspNetCore.Mvc;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Threading.Tasks;
namespace YourNamespace.Controllers
public class HomeController : Controller
{
[HttpPost]
public async Task
{
if (file == null || file.Length == 0)
{
return View("Index", new string[] { "No file selected." });
}
var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\uploads");
if (!Directory.Exists(uploadsFolder))
{
Directory.CreateDirectory(uploadsFolder);
}
var uniqueFileName = Guid.NewGuid().ToString() + "_" + file.FileName;
var filePath = Path.Combine(uploadsFolder, uniqueFileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(stream);
}
GenerateThumbnail(filePath, 150, 150, Path.Combine(uploadsFolder, $"thumb_{uniqueFileName}"));
return View("Index", new string[] { "File uploaded successfully." });
}
private void GenerateThumbnail(string imagePath, int width, int height, string thumbnailPath)
{
using (var image = Image.FromFile(imagePath))
{
var thumbnail = new Bitmap(width, height);
using (var graphics = Graphics.FromImage(thumbnail))
{
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.SmoothingMode = SmoothingMode.HighQuality;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.DrawImage(image, new Rectangle(0, 0, width, height));
}
thumbnail.Save(thumbnailPath, ImageFormat.Jpeg);
}
}
}
```
在这个控制器中，我们定义了一个`Upload`方法来处理文件上传请求，该方法首先检查是否选择了文件，如果没有选择文件则返回错误信息，然后它创建一个目录来存储上传的文件，并生成一个唯一的文件名以避免文件名冲突，它将文件保存到服务器上，并调用`GenerateThumbnail`方法生成缩略图，它返回一个成功消息。
### 3.2 视图更新
更新`Index.cshtml`视图以显示上传结果：
```html
@model string[]
@{
ViewBag.Title = "Upload Image";
Upload Image
@if (Model != null && Model.Length > 0)
foreach (var message in Model)
{
@message
}
else
```
这样，当用户上传文件时，页面会显示相应的消息。
## 四、运行和测试
你可以运行你的ASP.Net应用程序并在浏览器中访问`http://localhost:5000/Home/Index`来测试图片上传功能，选择一个图片文件进行上传，你应该会看到上传成功的消息，并且在`wwwroot/uploads`目录下找到原始图片和缩略图。
## 五、归纳
本文介绍了如何在ASP.Net中实现图片上传并生成高清晰缩略图的功能，我们使用了ASP.Net MVC框架来处理前端页面设计和后端逻辑实现，通过这种方式，你可以轻松地在你的Web应用程序中添加图片上传功能，并为上传的图片生成高质量的缩略图。
小伙伴们，上文介绍了“ASP.Net 上传图片并生成高清晰缩略图”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。