JS ajax 分块上传上传超过1M文件 前端JS代码后端VB

JavaScript (JS) 的 AJAX 技术可以用于分块上传大文件，特别是在处理超大文件时，因为一次性发送整个文件可能会超出浏览器的限制。前端实现分块上传的一般步骤如下：

**前端 JavaScript 代码示例**:

// 每次上传的数据块大小（这里假设1MB）
const blockSize = 1048576;

function uploadFile(file, url, progressCallback) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            progressCallback(Math.round((e.loaded / e.total) * 100));
        }
    }, false);

    const formData = new FormData();
    formData.append('file', file.slice(0, blockSize)); // 从文件开始读取指定长度的数据

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            console.log(xhr.responseText);
            if (xhr.status === 200) { // 如果请求成功
                // 继续上传下一块，直到文件全部上传完成
                uploadNextBlock(file, xhr.getResponseHeader('Content-Length'));
            } else {
                handleError(xhr.statusText);
            }
        }
    };

    xhr.send(formData);
}

function uploadNextBlock(file, totalSize) {
    if (totalSize <= blockSize) {
        completeUpload(file);
    } else {
        file.seek(blockSize); // 移动文件指针到下一个数据块
        uploadFile(file, url, progressCallback);
    }
}

function completeUpload(file) {
    // 文件上传完成后处理，比如关闭进度条、显示成功消息等
}

**后端 VB.NET 示例**（Visual Basic .NET 中，通常用 ASP.NET Core 或 Web API 实现）:

Imports System.IO
Imports Microsoft.AspNetCore.Http
Imports Microsoft.AspNetCore.Mvc

Public Class FileController : Controller
    ' 接收分块上传并合并
    Function UploadChunk(filePart As Stream, chunkNumber As Long, totalChunks As Long, filename As String) As ActionResult(Of String)
        Dim buffer As Byte() = New Byte(1048576 - 1) ' 匹配前端的 block size
        Dim receivedBytes As Integer = filePart.Read(buffer, 0, buffer.Length)

        ' ...在这里保存数据到数据库或临时文件...
        
        Return Ok("Received chunk " & chunkNumber & "/" & totalChunks)
    End Function

    ' 合并所有块，生成完整的文件
    Function CompleteUpload(filename As String) As ActionResult(Of String)
        ' ...从数据库或临时文件加载所有已接收的部分，然后合并...
        ' 返回完整文件或存储路径给客户端
    End Function
End Class