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

2024-03-01 0 626
目录
  • 服务器端
  • 前端
  • 组件源码地址

分享一个可多个文件同时上传、断点续传,并实时反馈上传进度的 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 多文件上传内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • ASP.NETCore实现多文件上传
  • asp.net core webapi文件上传功能的实现
  • ASP.NET Core单文件和多文件上传并保存到服务端的方法
  • ASP.NET Core文件上传与下载实例(多种上传方式)
  • asp.net core分块上传文件示例
  • asp.net core mvc实现文件上传实例
  • 解决ASP.NET Core Mvc文件上传限制问题实例

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 ASP.NET asp.net core 多文件分块同时上传的组件 https://www.u-9.cn/biancheng/aspnet/181739.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务