.NET Core Web APi大文件分片上传

Index.html

 1 @{
 2     ViewData["Title"] = "Home Page";
 3 }
 4 
 5 @{
 6     ViewBag.Title = "Home Page";
 7 }
 8 <div class="form-horizontal" style="margin-top:80px;">
 9     <div class="form-group">
10         <div class="col-md-10">
11             <input name="file" id="file" type="file" />
12         </div>
13     </div>
14     <div class="form-group">
15         <div class="col-md-offset-2 col-md-10">
16             <input type="submit" id="submit" value="上传" class="btn btn-success" />
17         </div>
18     </div>
19 </div>
20 
21 <script type="text/javascript" src="~/js/jquery-3.4.1.min.js"></script>
22 <script type="text/javascript">
23 
24     $(function () {
25         $('#submit').click(function () {
26             UploadFile($('#file')[0].files);
27         });
28     });
29 
30     function UploadFile(targetFile) {
31         // 创建上传文件分片缓冲区
32         var fileChunks = [];
33         // 目标文件
34         var file = targetFile[0];
35         // 设置分片缓冲区大小
36         var maxFileSizeMB = 8;
37         var bufferChunkSize = maxFileSizeMB * (1024 * 1024);
38         // 读取文件流其实位置
39         var fileStreamPos = 0;
40         // 设置下一次读取缓冲区初始大小
41         var endPos = bufferChunkSize;
42         // 文件大小
43         var size = file.size;
44         // 将文件进行循环分片处理塞入分片数组
45         while (fileStreamPos < size) {
46             var fileChunkInfo = {
47                 file: file.slice(fileStreamPos, endPos),
48                 start: fileStreamPos,
49                 end: endPos
50             }
51             fileChunks.push(fileChunkInfo);
52             fileStreamPos = endPos;
53             endPos = fileStreamPos + bufferChunkSize;
54         }
55         // 获取上传文件分片总数量
56         var totalParts = fileChunks.length;
57         var partCount = 0;
58         // 循环调用上传每一片
59         while (chunk = fileChunks.shift()) {
60             partCount++;
61             // 上传文件命名约定
62             var filePartName = file.name + ".partNumber-" + partCount;
63             chunk.filePartName = filePartName;
64             // url参数
65             var url = 'partNumber=' + partCount + '&chunks=' + totalParts + '&size=' + bufferChunkSize + '&start=' + chunk.start + '&end=' + chunk.end + '&total=' + size;
66             chunk.urlParameter = url;
67             // 上传文件
68             UploadFileChunk(chunk);
69         }
70     }
71 
72     function UploadFileChunk(chunk) {
73         var data = new FormData();
74         data.append("file", chunk.file, chunk.filePartName);
75         $.ajax({
76             url: '/api/upload/upload?' + chunk.urlParameter,
77             type: "post",
78             cache: false,
79             contentType: false,
80             processData: false,
81             data: data,
82         });
83     }
84 </script>
Index.html

相关文章: