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

在JavaScript (JS) 中，当需要通过 AJAX 实现大文件分块上传时，通常会使用 `FormData` 和 `fetch` 或者 `XMLHttpRequest` 来处理。假设你有10MB以上的文件，将它分成较小的部分上传，可以这样做：

前端 JavaScript 代码示例：

let fileInput = document.getElementById('file-input');
const CHUNK_SIZE = 10 * 1024 * 1024; // 每次上传10MB

async function uploadFileInChunks(file) {
  const reader = new FileReader();
  let totalSize = file.size;
  let formData = new FormData();

  for (let i = 0; i <= Math.ceil(totalSize / CHUNK_SIZE); i++) {
    let start = i * CHUNK_SIZE;
    let end = Math.min(start + CHUNK_SIZE, totalSize);

    if (start === end) { // 如果已到达文件结束，跳过剩余部分
      break;
    }

    reader.readAsArrayBuffer(file.slice(start, end)); // 读取每块数据
    await new Promise((resolve, reject) => {
      reader.onload = () => {
        formData.append('file', reader.result, 'chunk_' + i);
        resolve(); // 文件块上传完成后的回调
      };
      reader.onerror = reject;
    });

    // 发送AJAX请求到后端
    await fetch('/api/upload-chunk', {
      method: 'POST',
      body: formData,
      headers: {'Content-Type': 'multipart/form-data'}
    });
  }
}

fileInput.addEventListener('change', async event => {
  const selectedFile = event.target.files[0];
  if (!selectedFile || selectedFile.size > 10 * 1024 * 1024 * 1024) {
    alert('文件大小超过10MB，请分割后再上传！');
  } else {
    await uploadFileInChunks(selectedFile);
  }
});

后端 VB (Visual Basic) 代码示例（假设使用ASP.NET Core MVC框架）：

Imports Microsoft.AspNetCore.Mvc.Formatters.Json
Imports Microsoft.AspNetCore.Http.Files
Imports System.IO

Public Class UploadController : Inherits Controller
    <HttpPost("upload-chunk"), Produces(MediaTypeNames.Application.Json)>
    Public Async Function UploadChunk(file As IFormFile, chunkIndex As Int32) As JsonResult
        Dim stream = New MemoryStream()
        Await file.CopyToAsync(stream)
        ' 对接收到的数据进行处理、存储或转发，例如保存到数据库或临时文件
        ' ...

        Return Json(New { Success = True, Index = chunkIndex })
    End Function
End Class

注意：上述代码只是一个基本的示例，实际生产环境中还需要处理错误、断点续传（如果服务器支持）、进度更新等功能。