ASP.NET Core 知识速递 - Day 6:每天进步一点

文摘   2024-10-13 13:25   日本  
这节我们讲解如何使用APS.NET Core 文件处理,文件处理是我们开发系统中经常会用到的,在ASP.NET Core中如何接受客户端上传到服务器的文件呢?我们通过一个Demo例子来做演示,新建一个空的ASP.NET Core 模板,添加如下代码:
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

桂迹
分享原创,记录痕迹!
 最新文章