当前位置: 代码网 > it编程>编程语言>Asp.net > asp.net core 多文件分块同时上传的组件

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

2024年05月15日 Asp.net 我要评论
分享一个可多个文件同时上传、断点续传,并实时反馈上传进度的 asp.net core 组件。服务器端引用 nuget 包:jms.fileuploader.aspnetcore然后启用上传组件:

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

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com