【超详细简单】从基础文件上传到大文件并发控制分片上传、断点续传

本文全面介绍了文件上传的多种实现方式，从基础的单文件上传到复杂的多线程并发上传和断点续传功能，不管你是想学会使用基础文件上传的新手还是想继续深入学习大文件分片上传、通过并发请求避免上传时的网络拥塞，希望这篇文章能对你有所帮助！！！

一、基础文件上传

二、文件上传的不同请求方式

1. 原生Form表单请求

2. XMLHttpRequest (AJAX)

一、基础文件上传

前端具有多种方法实现基础的文件上传，但是语法大同小异，主要是选用的请求技术不同带来了细微的差异化，下面我将一一介绍，首先介绍一下原生HTML ＋ Fetch实现的文件上传👇

<form id="uploadForm">
   <input type="file" id="fileInput" name="file" />
   <button type="submit">Upload</button>
 </form>
 
 <script>
   document.getElementById('uploadForm').addEventListener('submit', function(event) {
     event.preventDefault();
     const fileInput = document.getElementById('fileInput');
     const file = fileInput.files[0];
     if (file.size > 5 * 1024 * 1024) {
       alert('文件大小不能超过 5MB');
       return;
     }
     if (file) {
       const formData = new FormData();
       formData.append('file', file);
       fetch('/upload', {
         method: 'POST',
         body: formData
       })
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => console.error(error));
     }
   });
 </script>

文件上传过程：

选择文件点击提交之后，event.preventDefault()会阻止表单默认的自动提交到服务器（并且可能会刷新）的行为，从而允许我们自定义表单处理逻辑
获取表单元素的files属性，该属性是一个FileList对象，包含所有选中的文件，fileInput.files[0]为选中的第一个文件
创建一个FormData对象，将选中的文件添加到该对象中，与其他表单数据一起发送到服务器

FormData 是唯一一个可以将文件数据和其他表单数据一起发送的内置对象。它支持 multipart/form-data 编码类型，这是上传文件所必需的。

当你通过FormData 对象上传文件时，浏览器会自动将请求头的 Content-Type 设置为 multipart/form-data，并生成正确的边界（boundary），观察文件上传的请求头，你可以看到类型以下的内容，浏览器会自动生成这个头部：

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件

二、文件上传的不同请求方式

只要你学会了使用原生的HTML来实现文件上传，那么其实不管你使用Vue2/3或是React，只要转化一下语法就可以轻易实现了。接下来根据不同的场景，我们来介绍一下不同的请求技术在文件上传功能的差异化。

1. 原生Form表单请求

 <body>
     <form id="uploadForm" action="/upload" method="POST" enctype="multipart/form-data">
         <input type="file" id="fileInput" name="file" mutiple />
         <button type="submit">Upload</button>
     </form>
 </body>
 <script>
     document.getElementById('uploadForm').addEventListener('submit',(e)=>{
         e.preventDefault(); //阻止表单的默认行为
         
         const files = document.getElementById('fileInput').files;
         const formData = new FormData();
         // 多文件上传需要遍历添加到FoemData对象中（需添加mutiple属性）
         for (let i = 0; i < files.length; i++) {
             formData.append('files[]', files[i]); // 使用 files[] 让后端接收数组
         }
 
         // console.log(formData)  // ❌错误行为！！！打印为：{}
         // 因为浏览器会故意隐藏FormData其内部存储的数据，直接 console.log 时只会显示原型，但数据实际存在
         // 遍历打印文件数据的正确做法 ✔
         for (const [key, value] of formData.entries()) {
             console.log(key, value);
         }
         // 自定义表单处理逻辑...
     })
 </script>

使用原始表单提交文件时，选择文件点击上传之后，表单会使用默认的提交行为，在这种情况下：

表单的提交目标：<form>标签设置的action属性，默认为当前页面的URL
提交方式：<form>标签设置的method属性，默认为GET方法提交，但是注意，文件上传通常需要使用POST方法和enctype="multipart/form/data"

如果你想要通过自定义逻辑实现文件上传，你需要使用e.preventDefault()阻止表单的默认行为，进而自定义自己的提交逻辑就行了

总结：

优点：
- 简单、兼容性好，适合简单的表单提交
- mutiple属性实现多文件上传
缺点：
- 页面强制刷新，导致其他数据丢失，用户体验差
- 处理二进制文件复杂繁琐
- 难以实现进度监控

2. `XMLHttpRequest (AJAX)`

一个使用XHR实现进度条监控的例子：

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         .red {
             display: inline-block;
             width: 0;
             height: 20px;
             background-color: red;
             transition: width 1s;
         }
 
         .green {
             background-color: green;
         }
     </style>
 </head>
 
 <body>
     <div>
         选择文件:
         <input type="file" id="f1" /><br /><br />
         <div id="progress">
             <span class="red"></span>
         </div>
         <button type="button" id="btn-submit">点 击 上 传</button>
     </div>
 </body>
 <script>
     function submitUpload() {
         // 获取进度条元素、设置初始宽度为0、移除绿色类
         let progressSpan = document.getElementById('progress').firstElementChild;
         progressSpan.style.width = '0';
         progressSpan.classList.remove('green');
 
         // 获取文件列表
         let fileList = document.getElementById('f1').files;
         // 如果没有选择文件，弹出提示
         if (!fileList.length) {
             alert('请选择文件');
             return;
         }
 
         // 创建FormData对象
         let fd = new FormData();
         // 遍历文件列表，添加到FormData对象中
         for (var i = 0; i < fileList.length; i++) {
             fd.append('file', fileList[i]);
         }
 
         let xhr = new XMLHttpRequest();
         // 设置请求类型、URL、是否异步
         xhr.open('POST', 'http://localhost:3000/upload', true);
         // 监听请求状态变化
         xhr.onreadystatechange = function () {
             console.log('状态发生变化：', xhr.readyState);
             if (xhr.readyState == 4) {
                 try {
                     let obj = JSON.parse(xhr.responseText);
                     console.log('响应结果为：',obj);
                 } catch (e) {
                     console.error('解析响应失败:', e);
                 }
             }
         };
         // 监听请求错误
         xhr.onerror = function () {
             alert('上传出错');
         };
 
         // 监听上传进度事件
         // 该事件会在文件上传过程中被浏览器持续触发，并传递一个ProgressEvent对象作为参数，
         xhr.upload.onprogress = updateProgress;
         function updateProgress(event) {
             // event.lengthComputable属性表示是否可以计算进度
             if (event.lengthComputable) {
                 let completedPercent = (event.loaded / event.total * 100).toFixed(2);
                 progressSpan.style.width = completedPercent + '%';
                 progressSpan.innerHTML = completedPercent + '%';
                 // 如果上传大于90完成，添加绿色类
                 if (completedPercent > 90) {
                     progressSpan.classList.add('green');
                 }
                 console.log('监控到文件已上传：', completedPercent);
             }
         }
 
         // xhr.upload.onprogress要写在xhr.send方法前面，否则event.lengthComputable状态不会改变，只有在最后一次才能获得，也就是100 % 的时候.
         xhr.send(fd);
     }
 
     document.getElementById('btn-submit').addEventListener('click', (e)=>{
         submitUpload();
     })
 </script>
 
 </html>

在上面这个例子中，你可以轻松的使用XHR实现进度条监控，这得益于xhr.upload.onprogress可以监听浏览器的自动触发的上传进度事件。

在xhr.upload.onprogress事件中：

该事件由浏览器在文件上传过程中自动触发，接收一个参数为ProgressEvent对象
ProgressEvent.lengthComputable是一个状态，代表此时的进度有变化，可计算
ProgressEvent.totle表示文件的总大小
ProgressEvent.loaded表示发送了多少字节

并且你也可以通过xhr.onprogress实现对于下载进度的监听

优点：
- 无刷新上传
- xhr.upload.onprogress可实现上传进度监控
- 兼容性好
缺点：请求错误处理较繁琐，代码冗余

3. Fetch（API）

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <div>
         选择文件:
         <input type="file" id="fileInput" />
         <button type="button" id="uploadButton">上传</button>
     </div>
 </body>
 <script>
     // 获取文件输入框和上传按钮元素
     const fileInput = document.getElementById('fileInput');
     const uploadButton = document.getElementById('uploadButton');
 
     // 监听上传按钮的点击事件
     uploadButton.addEventListener('click', () => {
         // 获取选中的文件
         const file = fileInput.files[0];
 
         // 创建FormData对象
         const formData = new FormData();
         formData.append('file', file);
 
         // 发送POST请求
         fetch('http://localhost:3000/upload', {
             method: 'POST',
             body: formData
         }).then(response => {
             if (response.ok) {
                 return response.json();
             } else {
                 throw new Error('网络错误');
             }
         }).then(data => {
             console.log('上传成功:', data);
         }).catch(error => {
             console.error('上传失败:', error);
         }); 
     })
 </script>
 </html>

优点：浏览器原生支持，基于promise链式回调，语法简洁
缺点：
- 无法直接实现上传进度监控
- 默认不携带cookie

4. Axios

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <style>
         .red {
             display: inline-block;
             width: 0;
             height: 20px;
             background-color: red;
             transition: width 1s;
         }
         .green {
             background-color: green;
         }
     </style>
 </head>
 <body>
     <div>
         选择文件:
         <input type="file" id="f1" /><br /><br />
         <div id="progress">
             <span class="red"></span>
         </div>
         <button type="button" id="btn-submit">点 击 上 传</button>
     </div>
 </body>
 <script>
     function submitUpload() {
         // 获取进度条元素、设置初始宽度为0、移除绿色类
         let progressSpan = document.getElementById('progress').firstElementChild;
         progressSpan.style.width = '0';
         progressSpan.classList.remove('green');
 
         // 获取文件列表
         let fileList = document.getElementById('f1').files;
         // 如果没有选择文件，弹出提示
         if (!fileList.length) {
             alert('请选择文件');
             return;
         }
 
         // 创建FormData对象
         let formData = new FormData();
         // 遍历文件列表，添加到FormData对象中
         for (var i = 0; i < fileList.length; i++) {
             formData.append('file', fileList[i]);
         }
 
         axios.post('http://localhost:3000/upload', formData, {
             headers: {
                 'Content-Type': 'multipart/form-data'
             },
             responseType: 'json',
             onUploadProgress: progressEvent => {
                 const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                 progressSpan.style.width = percentCompleted + '%';
                 progressSpan.innerHTML = percentCompleted + '%';
                 // 如果上传大于90完成，添加绿色类
                 if (percentCompleted > 90) {
                     progressSpan.classList.add('green'); 
                 }
                 console.log(`上传进度: ${percentCompleted}%`);
             }
         }).then(response => {
             console.log('上传成功:', response.data);
         }).catch(error => {
             console.error('上传失败:', error);
         });
     }
 
     document.getElementById('btn-submit').addEventListener('click', (e) => {
         submitUpload();
     })
 </script>
 
 </html>

优点：
- 基于promise，支持链式回调
- 监听 onUploadProgress事件可实现上传进度监控和监听下载进度
- 支持拦截器统一请求配置
缺点：需引入额外库，增加代码体积

除了以上四种方式之外，像WebSocket、众多第三方的SDK（如常用的阿里云OSS直传）都能实现文件上传功能，感兴趣的小伙伴可以自行了解......

三、大文件分片上传+并发控制

在某些情况下，用户可能需要上传超大文件，此时如果一次性上传大文件，那将会占用大量的网络带宽和服务器资源，可能导致上传过程缓慢甚至失败。如果上传过程中出现网络中断或服务器错误，那么就导致需要重新上传整个文件（在低带宽和不稳定的网络环境下网络很容易发生中断！）

分片上传
- 将文件分割成多个小分片，每个分片可以独立上传，这样可以充分利用网络带宽，提高上传速度
- 上传过程中出现网络中断或服务器错误，只需要重新上传失败的分片，而不需要重新上传整个文件
- 用户可以更快地看到上传进度，因为每个分片上传完成后都会更新进度条
- 每个分片可以独立上传，因此支持断点续传功能
并发控制
- 通过设置合理的并发请求数，避免过多并发请求导致的网络拥塞或服务器压力过大
- 保持服务器的稳定性和响应速度，减少卡顿、降低失败概率

文件本质上是一系列字节（Bytes）的集合，这些字节按照一定的顺序存储在存储介质（如硬盘、固态硬盘等）中。文件的内容可以是文本、图片、音频、视频等不同类型的数据，但它们在存储时都被因此，可以将这个字节序列按照一定的规则（如每 2MB 为一个分片）分割成多个小的字节序列，每个小序列就是一个分片。抽象为字节序列。

以下为实现了文件分片上传＋并发控制的一个实例👇

大致实现思路

首先将大文件进行分片（像处理字符串那样），分成一个个小切片存放在chunks数组中
通过并发控制上传多个分片文件，发送多个http请求，避免网络拥塞
为了让后端区分哪些分片是同一个大文件的，前端需要传递一个唯一标识token给后端，这里使用时间戳替代，实际应用上你可以使用speak-md5 去计算文件的hash值，那么就算文件同名那样不会有任何影响
后端接受并存储分片数据，将接收情况响应给后端
分片文件上传完毕之后，前端发送合并请求，后端将文件合并为大文件

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>文件分片上传</title>
 </head>
 <body>
     <input type="file" id="f1">
     <button id="btn-submit">上传</button>
     <script>
         function submitUpload() {
             const chunkSize = 2 * 1024 * 1024; // 分片大小2MB
             const file = document.getElementById('f1').files[0];
             const chunks = []; // 存储分片的数组
             const token = Date.now(); // 以时间戳作为token
             const name = file.name;
             // 如果想要显示上传进度，可以使用(已上传切片数*100/总切片数)来计算...
 
             // 文件分片
             let start = 0;
             while (start < file.size) {
                 const end = Math.min(start + chunkSize, file.size);
                 chunks.push(file.slice(start, end));
                 start = end;
             }
 
             // 上传分片
             const uploadChunk = async (index) => {
                 const fd = new FormData();
                 fd.append('file', chunks[index], `${name}`); // 修正文件名
                 fd.append('token', token);
                 fd.append('index', index);
 
                 return new Promise((resolve) => {
                     const xhr = new XMLHttpRequest();
                     xhr.open('POST', 'http://localhost:7399/upload', true);
                     // 设置请求头以发送 JSON 格式的参数（如果需要）
                     // xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 默认会自动设置
                     xhr.onload = () => {
                         console.log(`分片${index}上传结果:`, xhr.status, xhr.responseText);
                         resolve();
                     };
                     xhr.send(fd);
                 });
             };
 
             // 并发控制上传
             const concurrentUpload = async () => {
                 const CONCURRENT_LIMIT = 3; // 并发数
                 const total = chunks.length;
 
                 for (let i = 0; i < total; i += CONCURRENT_LIMIT) {
                     await Promise.all(
                         chunks.slice(i, i + CONCURRENT_LIMIT)
                             .map((_, idx) => uploadChunk(i + idx))
                     );
                     console.log(`已上传 ${Math.min(i + CONCURRENT_LIMIT, total)}/${total}`);
                 }
 
                 // 合并请求
                 const xhr = new XMLHttpRequest();
                 xhr.open('POST', 'http://localhost:7399/merge', true);
                 xhr.setRequestHeader('Content-Type', 'application/json');
                 xhr.onload = () => {
                     console.log('合并结果:', xhr.status, xhr.responseText);
                     alert(xhr.status === 200 ? '文件上传成功!' : '文件上传失败!');
                 };
                 xhr.send(JSON.stringify({
                     token: token,
                     filename: name,
                     chunkCount: chunks.length
                 }));
             };
 
             concurrentUpload().catch(console.error);
         }
 
         document.getElementById('btn-submit').addEventListener('click', submitUpload);
     </script>
 </body>
 
 </html>

四、大文件断点续传

上面我们已经实现了大文件的分片上传，并且通过并发请求有效的避免了网络拥塞，但是有时候不稳定的网络环境仍然会使网络中断，导致文件上传被终止，所以实现断点续传是非常有必要的，接下来我们介绍断点续传的实现。

其实实现的思路非常简单，一个文件的字节序列是不变的，所以只要文件相同并且切片大小不变，那么切片之后每一个分片都存储着相同的字节序列，所以你只需要标记已经上传的分片，当断点重传之后，重新上传所有切片，然后识别跳过已经上传的分片就可以实现不重复上传了。

为了避免页面刷新之后识别信息丢失，我们需要将识别信息存储至浏览器本地或传送给后端，如果只是存储在浏览器localStorage中，大致实现思路如下：

  // 获取已上传分片的存储
 const getUploadedChunksStorage = async () => {
     return JSON.parse(localStorage.getItem('uploadedChunks') || '{}');
 };
 
 // 保存已上传分片
 const saveUploadedChunksStorage = (index) => {
     let chunkStorageObj = getUploadedChunksStorage();
     let storage = { ...chunkStorageObj, [index]: true };
     localStorage.setItem('uploadedChunks', JSON.stringify(storage));
 };
 
 
 // 并发控制上传
  const concurrentUpload = ()=>{
      const CONCURRENT_LIMIT = 3; // 并发数
      const total = chunks.length;
      // 在并发控制中遍历切片标识找到第一个未上传的切片
      while (currentIndex < total && uploadedChunks[currentIndex] {
          currentIndex++;
      }
      // ......后续逻辑
  }
  
   const concurrentUpload = async () => {
                 const CONCURRENT_LIMIT = 3; // 并发数
                 const total = chunks.length;
 
                 for (let i = 0; i < total; i += CONCURRENT_LIMIT) {
                     await Promise.all(
                         chunks.slice(i, i + CONCURRENT_LIMIT)
                             .map((_, idx) => uploadChunk(i + idx))
                     );
                     console.log(`已上传 ${Math.min(i + CONCURRENT_LIMIT, total)}/${total}`);
                 }

另外，如果需要更加稳妥，后端可以增加一个接口用于传递已经上传的切片hash（文件及单个切片哈希都可以通过speak-md5库生成），这样就不需要担心浏览器切片标识丢失导致无法续传。

希望本文的内容能够帮助你在项目中实现高效、可靠的文件上传功能。如果你对文件上传技术有进一步的兴趣或者对以上内容存在疑惑或指正，欢迎评论或者联系小编噢！！！