JS 上传音频超过5M 分成10块上传 JS代码前端 VB后端代码

在JavaScript (JS) 中，当需要上传大文件（如超过5MB的音频）时，为了减少网络传输的压力，通常会采取分片上传（Chunked Upload）的方式。这涉及到前端处理文件切割以及进度管理，后端接收并合并数据。下面是一个简单的前端代码示例，使用HTML5 File API 和 Fetch API：

**前端（JavaScript）代码示例：**

// 假设 audioFile 是用户选择的音频文件对象
const file = audioFile;
const chunkSize = 5 * 1024 * 1024; // 每次上传5MB

let totalChunks = Math.ceil(file.size / chunkSize);
let uploadedChunks = 0;

function uploadNextChunk() {
  const reader = new FileReader();
  reader.onload = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload-chunk', true); // 后端API URL
    xhr.setRequestHeader('Content-Type', 'audio/*');
    xhr.upload.onprogress = handleProgress;
    xhr.onload = handleResponse;
    xhr.onerror = handleError;

    xhr.send(reader.result);
  };
  
  reader.readAsArrayBuffer(file.slice(uploadedChunks * chunkSize, uploadedChunks * chunkSize + chunkSize));
}

function handleProgress(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(`Uploaded ${percentComplete}% of chunk ${uploadedChunks + 1}/${totalChunks}`);
  }
}

function handleResponse(xhr) {
  if (xhr.status === 200) {
    uploadedChunks++;
    if (uploadedChunks < totalChunks) {
      uploadNextChunk();
    } else {
      // 所有块已上传，请求后端合并
      xhr.onloadend = () => {
        sendFinalCombineRequest();
      };
    }
  } else {
    console.error(`Failed to upload chunk ${uploadedChunks}: ${xhr.responseText}`);
  }
}

function handleError(xhr) {
  console.error(`Upload failed for chunk ${uploadedChunks}: ${xhr.statusText}`);
}

// 开始第一个chunk的上传
uploadNextChunk();

**后端（VB.NET 示例，假设使用ASP.NET Core）接收并合并数据的代码：**

Imports System.IO
Imports Microsoft.AspNetCore.Http
Imports System.Threading.Tasks

Public Async Function UploadChunkAsync(chunkNumber As Integer, content As Stream) As Task
    ' 在这里处理上传的单个块
    ' 存储到数据库、文件或其他地方
    
    Dim combinedFileStream As New FileStream("combinedFile", FileMode.Append)
    Using writer As BinaryWriter = New BinaryWriter(combinedFileStream)
        Await writer.WriteAsync(content.ToArray())
    End Using
    
    ' 返回成功响应给前端
    Return Ok()
End Function

Public Async Function CombineFilesAsync() As Task
    ' 这里读取所有已上传的块并将它们合并到一起
    Dim resultFileStream As New FileStream("finalFile", FileMode.Create)
    
    For Each file In GetUploadedChunks() ' 获取所有已上传的块路径
        Using inputFileStream As FileStream = New FileStream(file, FileMode.Open)
            Dim buffer = New Byte(4096) ' 读取块的缓冲区大小
            Dim readSize As Integer
            
            While (readSize = await inputFileStream.ReadAsync(buffer, 0, buffer.Length))
                resultFileStream.Write(buffer, 0, readSize)
            End While
        End Using
    Next
    
    ' 最终处理结果，然后返回
    '...
End Function

记得替换上述代码中的URL和函数名以适应您的实际项目设置，并在后端处理完成时通知前端，以便进行下一步操作。