使用 ASP.NET Core wwwroot 上传和存储文件

在 ASP.NET Core 应用程序中上传和存储文件是用户个人资料、产品目录等功能的常见要求。本指南将解释使用wwwroot存储图像（可用于文件）的过程以及如何在应用程序中处理图像上传。

步骤 1：设置项目环境

确保您的 ASP.NET 项目中具有必要的依赖项和环境设置。这包括配置服务和wwwroot在项目中创建用于静态文件服务的文件夹。 

静态文件服务是将未编译的内容（如图像、CSS 和 JavaScript 文件）直接从服务器传送到客户端浏览器的过程。

第 2 步：定义模型和 DTO

创建模型和数据传输对象 (DTO) 来处理图像元数据和其他相关数据。 

public class Branch
{
    public Guid Id { get; set; }
    public string Name { get; set; }
    public string Location { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public string? ImagePath { get; set; } // Path to the stored image
} 

步骤 3：配置图像上传的控制器操作 

实现控制器操作来处理上传图像的 HTTP 请求。 

上传并存储图像

1、为图像生成一个唯一的文件名。

2、将图像存储在wwwroot/images目录中（或任何其他目录中）。

3、在数据库中保存图像路径。

[HttpPost]
public async Task<IActionResult> AddBranch([FromForm] AddBranchDto addBranchDto, IFormFile image)
{
    string? imagePath = null;
    if (image != null)
    {
        var fileName = $"{Guid.NewGuid()}-{Path.GetFileName(image.FileName)}";
        var filePath = Path.Combine(_webHostEnvironment.WebRootPath, "images", fileName);

        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            await image.CopyToAsync(stream);
        }

        imagePath = Path.Combine("images", fileName);
    }

    var branchEntity = new Branch
    {
        Name = addBranchDto.Name,
        Location = addBranchDto.Location,
        Email = addBranchDto.Email,
        Phone = addBranchDto.Phone,
        ImagePath = imagePath
    };

    _dbContext.Branches.Add(branchEntity);
    await _dbContext.SaveChangesAsync();

    return Ok(branchEntity);
}

更新图像

处理图像的更新，包括在上传新图像时删除旧图像。

[HttpPut("{id:guid}")]
public async Task<IActionResult> UpdateBranch(Guid id, [FromForm] UpdateBranchDto updateBranchDto, IFormFile image)
{
    var branch = _dbContext.Branches.Find(id);
    if (branch == null)
        return NotFound();

    if (image != null)
    {
        var fileName = $"{Guid.NewGuid()}-{Path.GetFileName(image.FileName)}";
        var filePath = Path.Combine(_webHostEnvironment.WebRootPath, "images", fileName);

        if (!string.IsNullOrEmpty(branch.ImagePath))
        {
            var oldFilePath = Path.Combine(_webHostEnvironment.WebRootPath, branch.ImagePath.Replace('/', '\\'));
            if (System.IO.File.Exists(oldFilePath))
            {
                System.IO.File.Delete(oldFilePath);
            }
        }

        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            await image.CopyToAsync(stream);
        }

        branch.ImagePath = Path.Combine("images", fileName);
    }

    branch.Name = updateBranchDto.Name;
    branch.Location = updateBranchDto.Location;
    branch.Email = updateBranchDto.Email;
    branch.Phone = updateBranchDto.Phone;

    await _dbContext.SaveChangesAsync();

    return Ok(branch);
}

步骤 4：提供静态文件 

配置应用程序以从wwwroot目录提供静态文件。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles(); // Enable static file serving

    app.UseRouting();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

步骤 5：前端集成

在您的前端（例如，Angular）中，实现表单来处理图像上传。

<form [formGroup]="branchForm" (ngSubmit)="onSubmit()">
  <!-- Other form fields -->
  <mat-label>Image</mat-label>
  <input type="file" formControlName="image" (change)="onFileChange($event)" />
  <button type="submit">Save</button>
</form>

处理文件变更及提交

onFileChange(event: any): void {
    const file = event.target.files[0];
    if (file) {
        this.selectedFile = file;
    }
}

onSubmit(): void {
    if (this.branchForm.valid) {
        const formData = new FormData();
        Object.keys(this.branchForm.value).forEach(key => {
            formData.append(key, this.branchForm.value[key]);
        });

        if (this.selectedFile) {
            formData.append('image', this.selectedFile);
        }

        if (this.isEditMode) {
            this.branchService.updateBranch(this.branchId, formData).subscribe();
        } else {
            this.branchService.addBranch(formData).subscribe();
        }
    }
}

结论

        通过遵循这些步骤，您可以成功地将具有唯一名称的图像上传并存储在wwwrootASP.NET 应用程序的目录中，从而确保有效地管理和检索图像。

如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。