?【作者】科技、互联网行业优质创作者

【专注领域】.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造

点击右上方“关注”，里面有很多高价值技术文章，是你刻苦努力也积累不到的经验，能助你快速成长。升职+涨薪！！

前言

本文包含.NET Core、.NET Framework、及Web前端、三端的文件上传代码，是全网最全面的文件上传知识总结。

指定文件参数名(.Net Core)

代码

        [HttpPost("UploaFile")]
        public async Task UploadFileAsync(IEnumerable files)
        {
            //获取上传的文件之一
            var file1 = files.FirstOrDefault();

            //获取文件名
            var file1Name = file1.FileName;

            //获取文件流。后续就能进行读取、保存、等文件操作了
            var file1Stream = file1.OpenReadStream();
        }

调用示例

这里有一个需要注意的地方，就是上传文件的参数名，需要跟接口的入参名一致，也就是 files，我们使用的类型为 IEnumerable< IFormFile>，主要是 IFormFile 这个，因为我们上传的文件可能不止一个，所以这里使用了集合，要是不喜欢 IEnumerable，换成 List 也是可以的；

不指定文件参数名(.Net Core)

而在实际开发中，我们可能会碰到前端不配合，或者参数名改来改去，我们后端又不想频繁更改，那怎么办呢，此时我们可以使用以下的方法。

代码

        [HttpPost("UploaFile")]
        public async Task UploadFileAsync()
        {
            //获取上传的文件之一
            var file1 = HttpContext.Request.Form.Files.FirstOrDefault();

            //获取文件名
            var file1Name = file1.FileName;

            //获取文件流。后续就能进行读取、保存、等文件操作了
            var file1Stream = file1.OpenReadStream();
        }

混合(.Net Core)

而同样是一个POST请求，自然是可以通过url，route，from这些传参啦！

代码

[HttpPost("{method}/{value}/UploaFile")]
public?async?Task>?UploadFileAsync(
????[FromRoute]?Parameter?route,
????[FromQuery]?Parameter?query,
????[FromForm]?Parameter?form,
????IEnumerable?files)
{
????
}

示例

.Net Framework中的文件上传

与.Net Core所用方法稍有不同

代码

????????//获取上传的文件之一
????????var?file1?=?context.Request.Files[0];

????????//获取文件名
????????var?file1Name?=?file1.FileName;

????????//获取文件流。后续就能进行读取、保存、等文件操作了
????????var?file1Stream?=?file1.InputStream;

Web前端的处理方式

下面给出Javascript与Vue两种文文件上传方式。

JavaScript 方式

代码

  
  
  
  


  
1、ajax上传
  

    
    
  
  



  
2
  

    
    
  
  



  
3、form 表单标签 submit 上传
  
表单提交上传 通过IFormFile参数获取上传文件信息
  
AJAX请求上传，通过Request.Form.Files获取上传文件信息
  

    

      

        
Upload one or more files using this form:
        
      
    
    

      

        
      
    
  

Vue el-upload 方式

代码

写在最后

• ?请点击上方“关注”我，里面有很多高价值技术文章，是你刻苦努力也积累不到的经验，能助你快速成长。升职+涨薪！！
• ?推荐?15个?顶级?C#/.NET/.NET Core视频?教程?

领取方式：在我的个人主页的第一篇置顶文章中领取

?回复'面试'，获取C#/.NET/.NET Core面试宝典

回复'C#'，领取零基础学习C#编程

回复'NET'，领取.NET零基础入门到实战

回复'Linux'，领取Linux从入门到精通

回复'WPF'，领取高薪热门【WPF上位机+工业互联网】从零手写实战

回复'Modbus'，领取初识C#+上位机Modbus通信

回复'PLC'，领取C#语言与西门子PLC的通信实操

回复'blazor'，领取blazor从入门到实战

回复'TypeScript'，领取前端热门TypeScript系统教程

回复'vue'，领取vue前端从入门到精通

回复'23P'，领取C#实现23种常见设计模式

回复'MongoDB'，领取MongoDB实战

回复'Trans'，领取分布式事务

回复'Lock'，领取分布式锁实践

回复'Docker'，领取微服务+Docker综合实战

回复'K8s'，领取K8s部署微服务

回复'加群'，进.NET技术社区交流群

领取方式：在我的个人主页的第一篇置顶文章中领取