很高兴为您提供一个使用 Visual Studio 2022 建立的 .NET 6.0 MVC 项目，实现了您要求的图片上传和显示功能。
请按照以下步骤操作：
1. 打开 Visual Studio 2022，点击 "创建
新项目"，选择 "ASP.NET Core Web 应用程序"，并选择 "Web 应用程序 (
Model-View-Controller)" 模板。
2. 在下一个窗口中，选择目标框架为 ".NET 6.0"，并设置项目名称和位置等信息。点击 "创建" 按钮。
3. 在项目创建完成后，在 "Controllers" 文件夹下创建一个名为 "HomeController.cs" 的控制器，并添加以下代码：
```csharp
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
namespace ImageUpload.Controllers
{
public class HomeController : Controller
{
private readonly IWebHostEnvironment _environment;
public HomeController(IWebHostEnvironment environment)
{
_environment = environment;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public async Task<IActionResult> Upload(IFormFile file)
{
if (file == null || file.Length == 0)
{
return BadRequest();
}
// 保存文件到服务器文件夹中
var fileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";
var filePath = Path.Combine(_environment.WebRootPath, "uploads", fileName);
using (var stream = new FileStream(filePath, File
Mode.Create))
{
await file.CopyToAsync(stream);
}
// 将文件信息保存到
数据库中
using (var context = new ImageUploadContext())
{
var image = new Image
{
FileName = file.FileName,
FilePath = fileName,
CreatedAt = DateTime.Now
};
context.Images.Add(image);
await context.SaveChangesAsync();
}
return Ok(new { fileName });
}
}
}
```
4. 在 "
Models" 文件夹下创建一个名为 "Image.cs" 的
模型，并添加以下代码：
```csharp
using System;
namespace ImageUpload.
Models
{
public class Image
{
public int Id { get; set; }
public string FileName { get; set; }
public string FilePath { get; set; }
public DateTime CreatedAt { get; set; }
}
}
```
5. 在 "
Models" 文件夹下创建一个名为 "ImageUploadContext.cs" 的
数据库上下文，并添加以下代码：
```csharp
using Microsoft.EntityFrameworkCore;
namespace ImageUpload.
Models
{
public class ImageUploadContext : DbContext
{
public ImageUploadContext(DbContextOptions<ImageUploadContext> options)
: base(options)
{
}
public DbSet<Image> Images { get; set; }
}
}
```
6. 在 "Views" 文件夹下创建一个名为 "Index.cshtml" 的
视图文件，并添加以下代码：
```html
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<div class="dropzone" id="dropzone">
<h2>图片上传</h2>
<p>将本地图片拖拽到此区域即可上传</p>
</div>
<div class="image-container" id="image-container"></div>
</div>
@section Scripts {
<script>
var dropzone = document.getElementById("dropzone");
var imageContainer = document.getElementById("image-container");
dropzone.addEventListener("dragover", function (event) {
event.preventD
efault();
dropzone.classList.add("dragover");
});
dropzone.addEventListener("dragleave", function (event) {
event.preventD
efault();
dropzone.classList.remove("dragover");
});
dropzone.addEventListener("drop", function (event) {
event.preventD
efault();
dropzone.classList.remove("dragover");
var files = event.dataTransfer.files;
if (files.length > 0) {
var formData = new FormData();
formData.append("file", files[0]);
fetch("/Home/Upload", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
var imageUrl = "/uploads/" + data.fileName;
var image = new Image();
image.src = imageUrl;
image.onload = function () {
var width = image.width;
var height = image.height;
var scale = Math.min(750 / width, 750 / height);
var scaledWidth = width * scale;
var scaledHeight = height * scale;
imageContainer.innerHTML = "";
imageContainer.appendChild(image);
image.style.width = scaledWidth + "px";
image.style.height = scaledHeight + "px";
};
});
}
});
</script>
}
```
在上述代码中，我们使用了 HTML5 的拖放 API 来实现将图片拖拽到 "图片上传" 区域即可上传的功能。上传完成后，我们使用 JavaScript 代码将图片显示在 "图片显示框" 区域中，并自动调整其大小为 750x750 像素。
7. 在 "wwwroot" 文件夹下创建一个名为 "uploads" 的文件夹，用于存储上传的图片。
8. 在 "appsettings.json" 文件中添加
数据库连接字符串，如下所示：
```json
{
"ConnectionStrings": {
"D
efaultConnection": "Server=(localdb)\\mssqllocaldb;Database=ImageUpload;Trusted_Connection=True;MultipleActiveResultSets=true"
},
"Logging": {
"LogLevel": {
"D
efault": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
```
9. 在 "Startup.cs" 文件中添加以下代码，来配置使用
EF Core 连接
数据库：
```csharp
using ImageUpload.
Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace ImageUpload
{
public class Startup
{
public IConfiguration Configuration { get; }
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ImageUploadContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("D
efaultConnection")));
services.AddControllersWithViews();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "d
efault",
pattern: "{controller=Home}/{action=Index}/{id
?}");
});
}
}
}
```
10. 运行项目，即可在浏览器中查看效果。
以上就是一个简单的 .NET 6.0 MVC 项目，实现了将图片上传到服务器并在页面上显示的功能。注意，本示例中使用的是 SQL Server
数据库，您可以根据需要将其更改为其他
数据库。
本文指导如何在Visual Studio中通过'模型浏览器'更新实体类型，详解操作步骤以生成用于项目的Model实体类。
扫一扫
1981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
