IT俱乐部 ASP.NET 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 元素:

    
    

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

以上就是asp.net core多文件分块同时上传组件使用详解的详细内容,更多关于asp.net core多文件分块上传的资料请关注IT俱乐部其它相关文章!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/code/asp-net/9485.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部