首页 > 编程语言 >分享一个 asp.net core 多文件分块同时上传的组件

分享一个 asp.net core 多文件分块同时上传的组件

时间:2023-12-11 12:13:26浏览次数:43  
标签:core asp Headers Request 组件 uploader var net 上传

分享一个可多个文件同时上传、断点续传,并实时反馈上传进度的 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

标签:core,asp,Headers,Request,组件,uploader,var,net,上传
From: https://www.cnblogs.com/IWings/p/17894094.html

相关文章

  • 记一次 .NET 某新能源材料检测系统 崩溃分析
    一:背景1.讲故事上周有位朋友找到我,说他的程序经常会偶发性崩溃,一直没找到原因,自己也抓了dump也没分析出个所以然,让我帮忙看下怎么回事,那既然有dump,那就开始分析呗。二:Windbg分析1.到底是哪里的崩溃一直跟踪我这个系列的朋友应该知道分析崩溃第一个命令就是!analyze-v......
  • 基于DotNetty实现自动发布 - 实现一键打包发布
    前言上一篇,我只实现了一键检测代码变化,本篇才是真正的实现了一键打包发布效果图客户端打包待发布文件///<summary>///把多个文件添加到压缩包(保留文件夹层级关系)///</summary>publicstaticasyncTask<ZipFileResult>CreateZipAsync(IEnumera......
  • VS2022中ArcGIS Pro SDK for .NET安装和卸载指南
    VS2022中ArcGISProSDKfor.NET安装和卸载指南下载:资源下载安裝ArcGISProSDKfor.NET升级ArcGISProSDKfor.NET卸载ArcGISProSDKfor.NET使用专用图库分发适用于.NET的ArcGISProSDK概述ArcGISProSDKfor.NET提供以下3个VisualStudio扩展......
  • ASP.NET Core Program 类
    Program类是ASP.NETCore应用程序的一个入口点,它位于应用程序的根目录下,它定义了.NETCore应用程序所需的服务和中间件组件。Program类默认代码如下:​​​​​​​varbuilder=WebApplication.CreateBuilder(args);varapp=builder.Build();app.MapGet("/",()=>"Hell......
  • 解决Visual Studio 2022升级到17.8之后,Visual AssistX功能OpenCorespondingFile快捷键
    冲突的命令是:Edit.IntelliCode.APIUsageExamples,这是v17.7的:  这是17.8的:  所以,解决方法就是在新版本中,将Edit.IntelliCode.APIUsageExamples的快捷键移除,并重新为VAssistX.OpenCorespondingFile添加Alt+O的全局快捷键即可。改好后可以在VAX的菜单中看到,如果没生效,......
  • .NET Conf 2023 Chengdu 圆满结束!
    今年的.NETConf2023,中国区首次有两个会场举办LocalEvent,成都会场已于上周六12月9日圆满结束。本次成都会场共计100+余名.NET开发者报名参与,共计10+名志愿者参与筹备,是成都.NET社区历年来活动之最,还吸引了来自重庆地区,甚至大连地区的开发者也来参与,衷心感谢大家对本次活动的支......
  • Net Core 伪静态配置
    创建伪静态类usingMicrosoft.AspNetCore.Mvc.ApplicationModels;usingSystem.Text;namespaceMicro.Web{publicclassHtmlExtensionPageRouteModelConvention:IPageRouteModelConvention{publicvoidApply(PageRouteModelmodel){......
  • .NET企业应用安全开发动向-概览
    太长不读版:试图从安全的全局视角触发,探讨安全的重要性,讨论如何识别安全问题的方法,介绍.NET提供的与安全相关的基础设施,以及一些与时俱进的安全问题,为读者建立体系化的安全思考框架。引言关于“安全”二字,“一千个读者有一个哈姆雷特”,有人说安全就是杀毒软件,有人说安全就是第三......
  • 小程序物联网连接onenet
    wxml页面<view class="zong"><!--注释--><!-- 头--><view class="header"><view class="one"><text>空气质量:良好</text><text>广州市</text></view><!--注释--><view c......
  • Retentive Networks Meet Vision Transformers, 视觉RetNet
    alias:Fan2023tags:RetNetrating:⭐share:falseptype:articleRMT:RetentiveNetworksMeetVisionTransformers初读印象comment::(RMT)RetentiveNetwork(RetNet)因其显式衰减机制而在自然语言处理中受到关注,但它不适合基于图像的任务。本文提出了保留性自我注意力......