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

 

【出处】:https://www.cnblogs.com/IWings/p/17894094.html

posted on   jack_Meng  阅读(94)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.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文件操作

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩