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

在JavaScript前端处理大文件上传（如音频文件超过5MB），通常会采取分块上传（Chunked Upload）的方式，将大文件切分成较小的数据块分别发送。以下是简化的前端JS代码示例，用于创建一个文件分块上传的功能：

// 假设你有一个input[type=file]元素用于选择音频文件
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file.size > 5 * 1024 * 1024) { // 如果文件大小超过5MB
    const chunkSize = 5 * 1024 * 1024; // 每块5MB

    let start = 0;
    uploadNextChunk(file);

    function uploadNextChunk(file) {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload', true); // 替换为你ASP.NET的API URL
      xhr.setRequestHeader('Content-Type', 'application/octet-stream');
      xhr.onload = function() {
        if (xhr.status === 200) {
          start += chunkSize;
          if (start < file.size) {
            uploadNextChunk(file.slice(start)); // 发送下一块数据
          } else {
            console.log('所有块已上传完成');
          }
        } else {
          console.error('上传失败:', xhr.responseText);
        }
      };
      xhr.send(file.slice(start, start + chunkSize));
    }
  } else {
    // 直接发送小文件
    // ...
  }
});

对于ASP.NET的后端VB代码，你需要创建一个API接收并处理这些上传请求：

<WebMethod()> _
Public Shared Sub UploadChunk(ByVal byteData As Byte(), ByVal totalSize As Integer)
    Dim filePath As String = "path/to/save/uploaded/file" ' 替换为保存文件的实际路径
    Using writer As New BinaryWriter(File.Open(filePath, FileMode.Append))
        writer.Write(byteData)
    End Using

    If totalSize - Request.InputStream.Position >= chunkSize Then
        ' 如果还有更多数据未处理，继续处理下一个块
        Dim remainingBytes As Integer = totalSize - Request.InputStream.Position
        Dim nextOffset As Integer = Request.InputStream.Position
        Call UploadChunk(Request.InputStream.Read(byteData, 0, chunkSize), remainingBytes)
    Else
        ' 文件已完整上传，可以在此处做后续处理，例如更新数据库等
        Console.WriteLine("File uploaded successfully")
    End If
End Sub

请注意，这只是一个基本的示例，并未包含错误处理和进度反馈，实际应用中可能需要进一步完善。此外，后端服务器也需要处理文件的合并和存储。