0

0

Blazor InputFile 组件上传文件教程

幻夢星雲

幻夢星雲

发布时间:2025-12-25 06:27:27

|

227人浏览过

|

来源于php中文网

原创

blazor的inputfile组件是官方推荐的文件上传方式,封装html input type="file"并提供c# api读取文件流,但不自动发送http请求,需手动实现上传逻辑。

blazor inputfile 组件上传文件教程

Blazor 的 InputFile 组件是 WebAssembly 和 Server 两种托管模型下上传文件的官方推荐方式,它封装了原生 HTML <input type="file">,并提供便捷的 C# API 来读取文件内容。关键点在于:它不直接发送 HTTP 请求,而是让你自行处理文件流(如读取、校验、分块或调用后端 API),所以“上传”动作需要你额外实现。

基础用法:绑定文件并读取字节数组

最简单的场景是用户选中一个文件后,立即读取其全部内容到内存:

  • 在 Razor 页面中添加 <inputfile onchange="OnFileSelected"></inputfile>
  • @code 块中定义 OnFileSelected 方法,接收 InputFileChangeEventArgs
  • 调用 file.Data.ReadBytesAsync(file.Size) 获取 byte[](注意:仅适用于小文件,如头像、配置文件

示例片段:


@code {
  private async Task OnFileSelected(InputFileChangeEventArgs e) {
    var file = e.File;
    if (file.Size       var bytes = await file.Data.ReadBytesAsync(file.Size);
      // 后续处理 bytes,比如保存到本地或上传到服务器
    }
  }
}

多文件上传与进度显示(WebAssembly 专用)

WebAssembly 模型支持通过 InputFile 一次性选择多个文件(设置 multiple 属性),但 Server 模型受限于 SignalR 传输机制,不建议直接传大文件。若需进度反馈:

m18麦考林整站 for Ecshop
m18麦考林整站 for Ecshop

m18麦考林整站 for Ecshop v2.7.3 安装方法: 1,解压rar包上传到网站根目录 2,导入sql数据库文件,到你的数据库里,可以phpmyadmin等软件 3,修改data里config.php里面的数据库 用户名 密码等信息 为你自己的数据库信息 4,安装完毕之后的后台用户名密码为: 后台地址:域名/admin 用户名:admin 密码:admin123 模板使用教程: htt

下载
  • 使用 Stream + StreamReader 分块读取(避免内存爆炸)
  • 配合 Progress<int></int> 报告已读字节数,再换算成百分比
  • 注意:WebAssembly 中 JS 运行时对大文件流式读取支持良好,Server 模式需改用传统表单或 multipart/form-data 提交

上传到后端 API(推荐 HttpClient 方式)

InputFile 本身不发请求,你需要手动构造 MultipartFormDataContent 并用 HttpClient 发送:

  • 创建 var content = new MultipartFormDataContent()
  • content.Add(new StreamContent(file.Data.OpenReadStream()), "file", file.Name) 添加文件流
  • 可附加其他字段,如 content.Add(new StringContent("doc", Encoding.UTF8), "category")
  • 调用 http.PostAsync("/api/upload", content),服务端用 IFormFile 接收

⚠️ 注意:Server 模式下 file.Data.OpenReadStream() 返回的是客户端上传的临时流,必须在当前请求生命周期内完成读取;WebAssembly 则完全在浏览器内存中操作。

常见问题与规避技巧

  • 文件为空或 Size=0:检查是否误用了 e.GetMultipleFiles().FirstOrDefault() 却没判空;或未等待异步读取完成就访问结果
  • 大文件卡死或 OOM:禁用 ReadBytesAsync,改用 OpenReadStream() + 流式上传或分片上传
  • Server 模式上传失败:确认 Startup.csProgram.cs 中设置了足够大的 MaxRequestBodySize(如 options.Limits.MaxRequestBodySize = 100_000_000;
  • 中文文件名乱码:后端接收时用 file.FileName(非 ContentDisposition 解析),前端无需特殊编码

基本上就这些。掌握 InputFile 的核心是理解它只负责“读”,不负责“传”——剩下的交给你的逻辑和网络层。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

839

2023.08.22

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

910

2023.08.02

int占多少字节
int占多少字节

int占4个字节,意味着一个int变量可以存储范围在-2,147,483,648到2,147,483,647之间的整数值,在某些情况下也可能是2个字节或8个字节,int是一种常用的数据类型,用于表示整数,需要根据具体情况选择合适的数据类型,以确保程序的正确性和性能。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

598

2024.08.29

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

294

2025.08.29

C++中int的含义
C++中int的含义

本专题整合了C++中int相关内容,阅读专题下面的文章了解更多详细内容。

210

2025.08.29

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

514

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

678

2023.08.03

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

0

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 4万人学习

CSS教程
CSS教程

共754课时 | 38.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号