前端JS 大于5M的文件分片上传 前端JS代码，服务端System.Web.Services.WebMethod() VB代码

前端JavaScript进行大文件分片上传通常会采用File API和Blob、ArrayBuffer等技术。以下是一个简单的前端示例：

// 假设我们有一个大文件Input元素
const fileInput = document.getElementById('file-input');

// 当用户选择文件时
fileInput.addEventListener('change', function (e) {
  const file = e.target.files[0];
  
  // 将大文件切分为多个小块（例如每5MB）
  const chunkSize = 5 * 1024 * 1024; // 5 MB
  let chunks = [];
  for (let i = 0; i < Math.ceil(file.size / chunkSize); i++) {
    const chunkStart = i * chunkSize;
    const chunkEnd = Math.min(chunkStart + chunkSize, file.size);
    chunks.push(file.slice(chunkStart, chunkEnd));
  }

  // 发起异步上传请求
  uploadNextChunk(chunks.shift()); // 开始第一个块的上传
});

function uploadNextChunk(chunk) {
  const formData = new FormData();
  formData.append('file', chunk, `chunk_${chunks.length}`);

  fetch('/upload', {
    method: 'POST',
    body: formData,
    // 可能需要设置Content-Type: multipart/form-data 和额外头信息
  })
  .then(response => response.text())
  .catch(error => console.error('Upload error:', error))
  .finally(() => {
    if (chunks.length > 0) { // 如果还有剩余块
      uploadNextChunk(chunks.shift());
    } else {
      console.log('All chunks uploaded successfully');
    }
  });
}

至于服务器部分，这里给出一个基本的ASP.NET Web Services (VB.NET) 示例，假设你已经安装了`System.Web.Services.dll`：

Imports System.Web.Services

<ServiceContract>
Public Class UploadService
    <WebMethod> ' 使用@WebMethod标记为HTTP POST请求
    Public Function UploadFilePart(ByVal fileName As String, ByVal chunkData As Byte(), ByVal chunkIndex As Integer) As Boolean
        ' 这里处理接收上传的文件块，并将其保存到服务器
        ' 真实环境中你需要将chunkData写入合适的存储位置，如数据库或临时文件
        Return True ' 返回成功标志，实际应用中可能需要检查错误并返回结果
    End WebMethod
End ServiceContract

然后，你可以创建一个WCF Web Service引用，或者直接通过Ajax调用这个方法：

Imports System.Web.Services
Imports YourWebServiceNamespace ' 替换为你上面定义的服务命名空间

Dim wsClient As New UploadServiceClient
Dim result As Boolean

For Each chunk In chunks
    Dim bytes() As Byte = chunk.ToArray()
    Dim fileName = "your_file_name" ' 指定文件名
    result = wsClient.UploadFilePart(fileName, bytes, chunkIndex)
    If Not result Then
        ' 处理上传失败的情况
        Exit For
    End If
Next