如何通过Angular向.NET 6 Web API上传图片并访问，同时存储路径到数据库？

一、.NET 6 Web API 后端配置与接口实现 #

1. 配置静态文件访问 #

要让Angular能直接访问服务器上的图片，需在Program.cs中配置静态文件中间件，指定images文件夹为可访问的静态资源目录：

var builder = WebApplication.CreateBuilder(args);

// 添加控制器服务
builder.Services.AddControllers();

var app = builder.Build();

// 配置静态文件：开放根目录下的images文件夹访问权限
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "images")),
    RequestPath = "/images"
});

// 配置跨域（后续前端会用到）
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular",
        policy => policy.WithOrigins("http://localhost:4200")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

app.UseCors("AllowAngular");
app.UseAuthorization();
app.MapControllers();

app.Run();

先手动在项目根目录创建images文件夹，或者在代码里添加判断：如果文件夹不存在则自动创建。

2. 实现文件上传接口与数据库存储 #

新建UploadController.cs，处理图片上传请求，同时将图片路径存入数据库（以下用EF Core示例，可替换为你使用的数据库操作方式）：

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.IO;

[Route("api/[controller]")]
[ApiController]
public class UploadController : ControllerBase
{
    private readonly AppDbContext _dbContext;
    private readonly IWebHostEnvironment _env;

    // 注入数据库上下文和环境变量
    public UploadController(AppDbContext dbContext, IWebHostEnvironment env)
    {
        _dbContext = dbContext;
        _env = env;
    }

    [HttpPost("image")]
    public async Task<IActionResult> UploadImage(IFormFile file)
    {
        // 基础校验：文件存在、是图片类型
        if (file == null || file.Length == 0 || !file.ContentType.StartsWith("image/"))
        {
            return BadRequest("请上传有效的图片文件");
        }

        // 确保上传目录存在
        var uploadDir = Path.Combine(_env.ContentRootPath, "images");
        if (!Directory.Exists(uploadDir))
        {
            Directory.CreateDirectory(uploadDir);
        }

        // 生成唯一文件名，避免重名覆盖
        var uniqueFileName = $"{Guid.NewGuid()}{Path.GetExtension(file.FileName)}";
        var savePath = Path.Combine(uploadDir, uniqueFileName);

        // 保存文件到服务器
        using (var stream = new FileStream(savePath, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }

        // 保存相对路径到数据库（格式：/images/xxx.jpg）
        var imageRelativePath = $"/images/{uniqueFileName}";
        var imageRecord = new ImageRecord 
        { 
            FilePath = imageRelativePath, 
            UploadTime = DateTime.Now 
        };
        _dbContext.ImageRecords.Add(imageRecord);
        await _dbContext.SaveChangesAsync();

        // 返回路径给前端
        return Ok(new { path = imageRelativePath });
    }
}

// 数据库实体示例，按需调整字段
public class ImageRecord
{
    public int Id { get; set; }
    public string FilePath { get; set; }
    public DateTime UploadTime { get; set; }
}

// 数据库上下文示例
public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
    public DbSet<ImageRecord> ImageRecords { get; set; }
}

在appsettings.json中配置数据库连接字符串（以SQL Server为例）：

"ConnectionStrings": {
  "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=ImageUploadDb;Trusted_Connection=True;"
}

最后在Program.cs中注册DbContext：

builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

二、Angular 前端实现 #

1. 创建图片上传组件 #

生成组件：ng generate component image-upload

在image-upload.component.html中添加文件选择和预览区域：

<input type="file" accept="image/*" (change)="onFileSelected($event)">
<button (click)="uploadImage()" [disabled]="!selectedFile">上传图片</button>

<!-- 预览已上传的图片 -->
<div *ngIf="imageUrl" class="image-preview">
    <h3>图片预览：</h3>
    <img [src]="imageUrl" alt="已上传图片" style="max-width: 500px;">
</div>

在image-upload.component.ts中实现上传逻辑：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent {
  selectedFile: File | null = null;
  imageUrl: string | null = null;
  // 替换为你的Web API地址（本地开发一般是http://localhost:5000）
  private apiBaseUrl = 'http://localhost:5000/api/upload/image';

  constructor(private http: HttpClient) { }

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedFile = input.files[0];
    }
  }

  uploadImage(): void {
    if (!this.selectedFile) return;

    const formData = new FormData();
    formData.append('file', this.selectedFile);

    this.http.post<any>(this.apiBaseUrl, formData).subscribe(
      (res) => {
        // 拼接完整的图片访问地址
        this.imageUrl = `http://localhost:5000${res.path}`;
        alert('图片上传成功');
      },
      (err) => {
        console.error('上传失败', err);
        alert('图片上传失败，请重试');
      }
    );
  }
}

2. 注意事项 #

• 部署时需修改API地址和跨域域名，不要使用本地开发地址
• 可在后端添加文件大小限制，比如判断file.Length是否超过5MB
• 用Guid生成文件名是为了避免重名，也可根据业务需求调整命名规则
• 数据库存储相对路径，后续域名变更时无需修改数据库数据

内容的提问来源于stack exchange，提问作者user20843725