基于.NET Core 2.0 Web API的HTML5文件上传技术问题咨询

我整理了几个这类场景下最常见的问题和对应的解决办法，你可以参考下：

1. 静态文件托管与前端路由适配 #

因为React构建后的产物是静态资源，首先得确保.NET Core能正确托管这些文件。在Startup.cs的Configure方法里，要配置好静态文件中间件，同时处理前端路由的 fallback 问题（比如用React Router的BrowserRouter时，刷新页面不会404）：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // 托管wwwroot下的静态文件
    app.UseStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");

        // 当请求不匹配任何API路由时，返回React的index.html，支持前端路由
        routes.MapSpaFallbackRoute(
            name: "spa-fallback",
            defaults: new { controller = "Home", action = "Index" });
    });
}

另外，记得把React构建后的build文件夹内容复制到.NET Core项目的wwwroot目录下，你可以在React的package.json里修改build命令自动复制，或者在.NET Core的.csproj里添加复制规则：

<ItemGroup>
  <Content Update="wwwroot/**">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
  </Content>
</ItemGroup>

2. 开发环境跨域问题 #

如果开发时React跑在localhost:3000，而API在localhost:5000，肯定会遇到跨域问题。在Startup.cs里配置CORS就能解决：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowReactDev",
            policy => policy.WithOrigins("http://localhost:3000")
                            .AllowAnyHeader()
                            .AllowAnyMethod());
    });

    services.AddMvc();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // 要在UseMvc之前启用CORS
    app.UseCors("AllowReactDev");
    app.UseMvc();
}

3. FileController的规范配置 #

你的API Controller已经加了[Produces("application/json")]和[Route("api/File")]，这里给你补一个完整的示例，确保接口能正常工作：

[Produces("application/json")]
[Route("api/File")]
public class FileController : Controller
{
    // 获取文件列表的GET接口
    [HttpGet]
    public IActionResult GetFileList()
    {
        // 这里替换成你的业务逻辑
        var files = new List<string> { "demo1.pdf", "demo2.png" };
        return Ok(files);
    }

    // 文件上传的POST接口
    [HttpPost]
    public async Task<IActionResult> UploadFile(IFormFile file)
    {
        if (file == null || file.Length == 0)
            return BadRequest("请选择要上传的文件");

        // 示例：保存文件到wwwroot/uploads目录
        var uploadPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
        if (!Directory.Exists(uploadPath))
            Directory.CreateDirectory(uploadPath);

        var filePath = Path.Combine(uploadPath, file.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }

        return Ok(new { message = "文件上传成功", filePath = $"/uploads/{file.FileName}" });
    }
}

注意要确保服务器有对应目录的读写权限，避免文件保存失败。

4. React中调用API的正确姿势 #

在React组件里调用API时，生产环境直接用相对路径就行，开发环境可以配置代理避免跨域：

// 示例：获取文件列表
const fetchFiles = async () => {
  try {
    const response = await fetch('/api/File');
    const data = await response.json();
    console.log('文件列表：', data);
  } catch (error) {
    console.error('请求失败：', error);
  }
};

// 示例：上传文件
const handleFileUpload = async (event) => {
  const file = event.target.files[0];
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('/api/File', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    console.log(result.message);
  } catch (error) {
    console.error('上传失败：', error);
  }
};

开发环境下，在React项目的package.json里加一行"proxy": "https://localhost:5001"（换成你的API地址），这样请求相对路径会自动转发到API服务器。

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