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); }
组件源码地址
https://github.com/simpleway2016/JMS.FileUploader.git
到此这篇关于asp.net core 多文件分块同时上传的组件的文章就介绍到这了,更多相关asp.net core 多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
.Net微信网页开发解决用户在不同公众号或在公众号、移动应用之间帐号统一问题
这篇文章主要介绍了.Net微信网页开发解决用户在不同公众号或在公众号、移动应用之间帐号统一问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09asp.net core集成CKEditor实现图片上传功能的示例代码
这篇文章主要介绍了asp.net core集成CKEditor实现图片上传功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01Asp.net core Web Api配置swagger中文的实现
swagger是一个api文档自动生动工具,还集成了在线调试. 可以为项目自动生成接口文档, 非常的方便快捷,具有一定的参考价值,感兴趣的可以了解一下2023-09-09System.Web中不存在类型或命名空间名称“Optimization”(是否缺少程序集引用?)
这篇文章主要为大家详细介绍了命名空间“System.Web”中不存在类型或命名空间名称“Optimization”的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-04-04
最新评论