.net Core分段上传文件,大文件上传(V2.1)

最新推荐文章于 2023-11-24 15:44:57 发布
最新推荐文章于 2023-11-24 15:44:57 发布
阅读量654 收藏
点赞数
分类专栏： .net Core C# 前端 文章标签： .net Core 分段上传文件 大图片上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Apeart/article/details/103095372
版权
.net Core 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
C#
13 篇文章 0 订阅
订阅专栏
前端
7 篇文章 0 订阅
订阅专栏

UploadController部分代码


        [HttpPost]
        public async Task<IActionResult> UploadPart(IFormFile file,int start,string filetemp)
        {
            long size = file.Length;

            if (!System.IO.Directory.Exists(AppContext.BaseDirectory + "/upload/"))
            {
                System.IO.Directory.CreateDirectory(AppContext.BaseDirectory + "/upload/");
            }
            var filePath = AppContext.BaseDirectory + "/upload/" + filetemp;

            if (start == 0) {
                if(System.IO.File.Exists(filePath)){
                    System.IO.File.Delete(filePath);
                }
            }
            FileStream saveFileStream;
            if (start == 0)
            {
                saveFileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write, FileShare.ReadWrite);
            }
            else {
                saveFileStream = new FileStream(filePath, FileMode.Append, FileAccess.Write, FileShare.ReadWrite);
            }
            //Stream stream = file.OpenReadStream();
             把 Stream 转换成 byte[] 
            //byte[] bytes = new byte[file.Length];
            //stream.Read(bytes, 0, bytes.Length);
             设置当前流的位置为流的开始 
            //stream.Seek(0, SeekOrigin.Begin);

            try
            {
                if (start > 0)
                {
                    saveFileStream.Seek(start, SeekOrigin.Begin);
                }
                //saveFileStream.Write(bytes,0,bytes.Length);
                await file.CopyToAsync(saveFileStream);

                // saveFileStream.Seek(start, SeekOrigin.Begin);
                //await saveFileStream.Write(bytes, 0, bytes.Length);
            }
            catch (Exception ex)
            {
            }
            finally
            {
                saveFileStream.Close();
                saveFileStream.Dispose();
            }

            //foreach (var formFile in files)
            //{
            //    var filePath = AppContext.BaseDirectory + "/upload/" + formFile.FileName;
            //    if (formFile.Length > 0)
            //    {
            //        using (var stream = new FileStream(filePath, FileMode.Create))
            //        {
            //            await formFile.CopyToAsync(stream);
            //        }
            //    }
            //}

            return Ok(new { count = 1, size });
        }

前端页面代码

<!DOCTYPE html>
<html>
<head>
    <title>断点续传</title>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        input[type="file" i] {
            width: 100px;
            height: 50px;
            opacity: 0;
            /*visibility: hidden;*/
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
        }

        .upload-button-wrap {
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

            .upload-button-wrap:hover .upload-button {
                border-color: #000;
            }

        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }

        .clearfix {
            zoom: 1;
        }

        .upload-button {
            width: 100px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }

        .upload-wrap {
            position: relative;
        }

        #uploadButton {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="upload-wrap">
        <div class="upload-button-wrap clearfix">
            <input type="file" id="InputFile" name="InputFile">
            <button class="upload-button">选择图片</button>
        </div>
        <button id="uploadButton">上传</button>
    </div>
    <script type="text/javascript">
        (function (w) {
            var fileUpload = function (config) {
                var _files = [],    // 要上传文件的队列
                    _file = null,    // 当前上传的文件
                    _upload = config.uploadId,    // input[type = "file"]的控件ID
                    _submit = config.submitId,    // input[type = "submit"]的控件ID
                    _url = config.url,
                    _unit = 1024 * 500,
                    _start = 0,
                    _xmlRequest = new XMLHttpRequest();

                var _init = function () {
                    document.getElementById(_upload).addEventListener("change", function (e) {
                        _files = this.files;
                        _file = _files[0];
                        e.preventDefault();
                    }, false);
                    document.getElementById(_submit).addEventListener("click", function (e) {


                        _goUpload();
                        //var formData = new FormData();
                        //formData.append('InputFile', _file);
                         向后抬请求文件是否存在
                        //formData.append('fileName', _file.name);
                        //formData.append('fileContent', _file.slice(_start, _start + _unit));

                        //$.ajax({
                        //    url: _url + "?fileName=" + _file.name + "&file_start=" + _start,
                        //    type: 'post',
                        //    contentType: false,
                        //    processData: false,
                        //    data: formData,
                        //    success: function (res) {
                        //        console.log("分段... .. .");
                        //    },
                        //    error: function (res) {
                        //        console.log(res);
                        //    }
                        //});

                        //_xmlRequest.onload = function () {
                        //    if (_xmlRequest.readyState == 4 && _xmlRequest.status == 200) {
                        //        _start = parseInt(_xmlRequest.responseText);
                        //        _uploadFile();
                        //    }
                        //    _xmlRequest.onload = function () {
                        //        if (_xmlRequest.readyState == 4 && _xmlRequest.status == 200) {
                        //            if (_xmlRequest.responseText == "success") {
                        //                _start = _start + _unit;
                        //                _uploadFile();
                        //            }
                        //        }
                        //    }
                        //};
                        //_getSetbacks();
                        e.preventDefault();
                    }, false);
                },
                    // 获取文件进度
                    //_getSetbacks = function () {
                    //    _xmlRequest.open("GET", _url + "?fileName=" + _file.name + "&file_start=" + _start, true);
                    //    _xmlRequest.send(null);
                    //},
                    _goUpload = function () {
                        //if (_start > _file.size) return;
                        if (_start < _file.size) {
                            var weiba = _start + _unit;
                            if (weiba > _file.size) { weiba = _file.size; }
                            var formData = new FormData();
                            formData.append('file', _file.slice(_start, weiba));//这个才是关键file要和后台对应
                            formData.append('fileName', _file.name);
                            formData.append('fileContent', _file.slice(_start, weiba));
                            $.ajax({
                                url: _url + "?filetemp=" + _file.name + "&type=part&start=" + _start,
                                type: 'post',
                                contentType: false,
                                processData: false,
                                async: false,
                                data: formData,
                                success: function (res) {
                                    console.log("分段... .. .");
                                    _start = _start + _unit;
                                    setTimeout(_goUpload, 1000);
                                    //_goUpload();
                                },
                                error: function (res) {
                                    console.log(res);
                                }
                            });
                        } else {
                            console.log("已经完成了");
                        }
                    }
                // 上传文件
                //_uploadFile = function () {
                //    if (_start > _file.size) return;
                //    var weiba = _start + _unit;
                //    if (weiba > _file.size) { weiba = _file.size; }

                //    var formData = new FormData();
                //    formData.append('InputFile', _file);
                //    formData.append('fileName', _file.name);
                //    formData.append('fileContent', _file.slice(_start, weiba));
                //    _xmlRequest.open("POST", _url + "?fileName=" + _file.name + "&file_start=" + _start, true);
                //    _xmlRequest.send(formData);
                //};

                _init()
            }

            w.fileUpload = fileUpload;

        })(window);
        var f = new fileUpload({
            uploadId: 'InputFile',
            submitId: 'uploadButton',
            url: '/Upload/UploadPart'
        })


    </script>
</body>
</html>

这个简洁，我看有一个麻烦得要死，还要修改设置大文件限制啥得。

 

这个是一个例子，简单得例子，实际中要去校验最后文件得md5啥得，还有就是要修改对应得文件存放名和后缀啥得！

PasteSpider
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在ASP.NET Core 中上传文件
dotNET跨平台
01-24 516
简介ASP.NET Core 支持使用缓冲的模型绑定（针对较小文件）和无缓冲的流式传输（针对较大文件）上传一个或多个文件。传文件的作用1.上传是支持上传任何文件的，图片只是上传的一种。2.根据扩展名进行区分你所上传的文件形式。代码实现安装 Microsoft.AspNetCore.StaticFiles 包Install-PackageMicrosoft.AspNetCore.StaticFil...
【.Net Core】上传文件-IFormFile
热门推荐
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
11-24 1万+
【.Net Core】上传文件-IFormFile
.net core后端与前端以流的形式传输
oneofironlady的博客
08-14 511
.net core后端与前端以流的形式传输 接收方式 [Route(“UploadPageAtuo”)] [HttpPost,RequestSizeLimit(long MaxValue)] public IActionResult UploadPageAtuo([FormForm] T t) { IFormFileCollection formfiles = Request.Form.Files; foreach(var item formfiles) { stream filestream=item.O
.NET Core文件上传
qq_27337291的博客
11-25 3471
本文基于.NET Core 3.1开发。 1、设置文件上传大小 打开Program.cs文件，添加如下代码： webBuilder.UseStartup<Startup>(). ConfigureKestrel(options => { //设置文件上传大小为int的最大值 options.Limits.MaxRequestBodySize = int.
.net Core 2.1和.net Core 2.2中上传文件的core webapi项目中接收参数问题
chenludaniel的专栏
03-28 4174
今天遇到一个问题，新建了一个.net Core 2.2项目，然后Controller里面加个了action，如下： public IActionResult Excel2Mysql([FromForm]IFormFileCollection formData) 当用POSTMAN调试时候，formData的Count始终等于0，但是后来又建了一个基于net core 2.1的webapi，...
asp.net core mvc实现文件上传实例
10-20
在ASP.NET Core MVC中，文件上传是一个...例如，可能需要添加验证以检查文件类型和大小，防止恶意文件上传，以及优化存储策略以适应大文件或大量文件的场景。在实际开发中，还需要考虑错误处理和用户体验方面的细节。
asp.net core分块上传文件示例
10-20
ASP.NET Core 分块上传文件是一种处理大文件上传的策略，它将大文件分割成多个小块，逐个上传，然后再在服务器端将这些分块重新组合成原始文件。这种方式能够有效地处理由于网络不稳定或文件过大导致的传统一次性...
ASP.NET Core文件上传与下载实例(多种上传方式)
01-20
1.使用模型绑定上传文件(官方例子) 官方机器翻译的地址:https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads 这里吐槽一下 – -,这TM的机器翻译..还不如自己看E文的.. 首先我们需要创建一个form...
asp.net core实现文件上传功能
01-20
在asp.net core中上传文件并保存在服务器上，是很容易的。下面就来演示一下怎么样在 ASP.NET Core项目中进行文件上传。  首先，创建一个 asp.net core 项目，然后在Controller文件件添加一个HomeController，然后在...
asp.net core 3.0 上传文件示例
11-07
上网找了好多都不行，就自己研究写了一个！此示例需要在命令行里用dotnet run 启动，不能用vs里的IIS Express启动。cmd 进入到应用目录，然后用dotnet run 启动。在浏览器里 用https://localhost:5001/ 访问既可
C# HTML Form表单文件上传处理
天马3798
09-03 2242
请求上下文中 Form参数的IFormFileCollection，可以获取上传的文件列表。2.form 表单的加密方式 enctype="multipart/form-data"C# HTML Form表单文件上传处理。1.form 表单 需要Post方式请求。
Net core中使用System.Drawing对上传的图片流进行压缩
swk795795的博客
09-13 1983
Net core中使用System.Drawing对上传的图片流进行压缩
.net core WebAPI --文件分片上传
最新发布
liulv_yan的博客
11-24 318
因工作要求需要提供文件分片上传的功能，在这里记录一下。
ASP.NET CORE使用WebUploader对大文件分片上传,实时通知前端上传进度
5653325的专栏
07-26 2512
本次，我们来实现一个单个大文件上传，并且把后台对上传文件的处理进度通过ASP.NETCORESignalR反馈给前端展示，比如上传一个大的zip压缩包文件，后台进行解压缩，并且对压缩包中的文件进行md5校验，同时要求前台可以实时（实际情况看网络情况）展示后台对压缩包的处理进度（解压、校验文件）。在正式使用WebUploader进行上传文件之前，先对它的执行流程和触发的事件做个大致的介绍（如有不对的地方请指正），我们可以通过它触发的事件来做相应的流程或业务上的预处理，比如文件秒传，重复文件检测等。......
.NET Core Web APi大文件分片上传研究
dz45693的专栏
08-11 2221
前言 前两天发表利用FormData进行文件上传，然后有人问要是大文件几个G上传怎么搞，常见的不就是分片再搞下断点续传，动动手差不多也能搞出来，只不过要深入的话，考虑的东西还是很多。由于断点续传之前写个几篇，这里试试利用FormData来进行分片上传。 .NET Core Web APi文件分片上传 这里我们依然是使用FormData来上传，只不过在上传之前对文件进行分片处理，如下HTML代码 <div class="form-horizontal" style="margin-top:80
asp.net文件上传下载
Mr_Zang666的博客
08-15 475
以ASP.NET Core WebAPI作后端API，用Vue构建前端页面，用Axios从前端访问后端API ,包括文件的上传和下载。 准备文件上传的API #region文件上传可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file...
csharp WebUploader 分片上传
weixin_45525177的博客
05-27 159
以ASP.NET Core WebAPI作后端API，用Vue构建前端页面，用Axios从前端访问后端API ,包括文件的上传和下载。 准备文件上传的API #region文件上传可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != nul...
ASP.NET Core 2.0中，解决大文件上传配置问题
xsfqh的专栏
05-23 757
在.net core2.0中，当上传文件大于30MB时，会报出：服务器上的请求筛选被配置为拒绝该请求，因为内容长度超过配置的值的问题。 针对此问题的解决思路如下： 1）、在Startup.cs中增加如下代码： public void ConfigureServices(IServiceCollection services) { services.AddMvc().SetCompatibilityVersion(CompatibilityV...
.net core 大文件上传
Star_Inori的博客
08-03 1202
.net core 大文件上传
如果配置.Net Core上传文件大小
05-27
在 .NET Core 中，可以通过以下方式配置上传文件的大小限制： 1. 在 Startup.cs 文件中，找到 ConfigureServices 方法，在方法中添加以下代码： ``` services.Configure(options => { options.MaxRequestBodySize...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值