asp.net core 多文件分块同时上传组件
分享一个可多个文件同时上传、断点续传,并实时反馈上传进度的 Asp.Net core 组件。
服务器端
引用 nuget 包:JMS.FileUploader.AspNetCore
然后启用上传组件:
app.UseAuthorization();
app.MapControllers();
//启用上传组件,并限制单个文件最大100M
app.UseJmsFileUploader(1024*102400);
app.Run();
在 Controller 里面,写个 Test 函数,处理上传的文件:
[ApiController]
[Route("[controller]/[action]")]
public class MainController : ControllerBase
{
[HttpPost]
public string Test([FromBody] object body)
{
var customHeader = Request.Headers["Custom-Header"];
//临时文件路径
var filepaths = Request.Headers["FilePath"];
//文件名
var filenames = Request.Headers["Name"];
return filenames;
}
}
文件上传完毕,保存在临时文件中,Request.Headers["FilePath"] 可以读取这些文件的路径,如果确定要保留这些文件,用 File.Move 把它们移到你的目标文件夹当中;
Request.Headers["Name"] 则是读取文件名。
前端
引入 jms-uploader 组件:
import JmsUploader from "jms-uploader"
html 元素:
<input id="file1" multiple type="file" />
<input id="file2" multiple type="file" />
<button onclick="upload()">
upload
</button>
<div id="info"></div>
javascript 脚本:
async function upload() {
//自定义请求头
var headers = function () {
return { "Custom-Header": "test" };
};
//提交的body
var dataBody = {
name: "abc"
};
var uploader = new JmsUploader("http://localhost:5200/main/test", [document.querySelector("#file1").files, document.querySelector("#file2").files], headers, dataBody);
uploader.setPartSize(1024);//设置分块大小,默认是102400
uploader.onUploading = function (percent, uploadedSize, totalSize) {
document.querySelector("#info").innerHTML = percent + "% " + uploadedSize + "," + totalSize;
};
var ret = await uploader.upload();
//上传完毕
alert(ret);
}
组件源码地址
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/17895407.html
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
分类:
Asp.Net Core
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2020-12-11 C#中,当鼠标移动到控件上,动态显示提示内容 ---- ToolTip控件的使用
2017-12-11 JavaWeb框架之Struts2 ---- 系列学习
2015-12-11 经典算法题——五家共井
2015-12-11 经典算法题 -- 百钱买百鸡
2014-12-11 oracle系统表的查询
2014-12-11 ORACLE系统表大全
2012-12-11 vbs文件操作