var app = WebApplication.Create();
app.MapGet("", async context =>
{
context.Response.Headers.Append("content-type", "text/html;charset=utf-8");
var body = $@"
<html>
<head>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' rel='stylesheet' />
<style>
body {{
background-color: #f4f4f4;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}}
.upload-container {{
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 400px;
}}
.custom-file-input {{
cursor: pointer;
}}
</style>
</head>
<body>
<div class='upload-container'>
<h1 class='text-center mb-4'>上传文件</h1>
<form action='Upload' method='post' enctype='multipart/form-data'>
<div class='form-group'>
<div class='custom-file'>
<input type='file' class='custom-file-input' id='customFile' name='file'>
<label class='custom-file-label' for='customFile'>选择文件</label>
</div>
</div>
<button type='submit' class='btn btn-primary btn-block'>上传</button>
</form>
</div>
<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js'></script>
<script>
// Update the label of the file input with the selected file name
$('.custom-file-input').on('change', function (e) {{
var fileName = e.target.files[0].name;
$(this).next('.custom-file-label').html(fileName);
}});
</script>
</body>
</html>
";
await context.Response.WriteAsync(body);
});
app.MapPost("Upload", async context =>
{
if (context.Request.HasFormContentType)
{
var form = await context.Request.ReadFormAsync();
foreach (var f in form.Files)
{
using (var body = f.OpenReadStream())
{
var fileName = Path.Combine(app.Environment.ContentRootPath, f.FileName);
File.WriteAllBytes(fileName, ReadFully(body));
await context.Response.WriteAsync($"上传文件被写入到 {fileName}");
}
}
}
await context.Response.WriteAsync("");
});
app.Run();
static byte[] ReadFully(Stream input)
{
byte[] buffer = new byte[16 * 1024];
using var ms = new MemoryStream();
int read;
while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
{
ms.Write(buffer, 0, read);
}
return ms.ToArray();
}
在上面代码中,我们首先从服务器端输出一个HTML的页面,我们基于这个页面上传文件并在服务器端接收文件,我们在服务器中从Request中读取我们的文件,并获取到上传的文件,后续可以根据自己的业务系统来处理。
注意在上传文件时,我们客户端提交表单要以Form的方式去提交(也叫做 multipart/form-data
)。
在接收文件时,除了上面方法我们还可以使用模型绑定的方式接收文件,接收多个文件时使用IFormFileCollection类型,接收单个文件时使用IFormFile类型。
源代码地址:
https://github.com/bingbing-gui/AspNetCore-Skill/tree/master/src/aspnetcore-knowledge-point/form-upload-file