如何处理分块上传过程中的回调以优化用户体验？

爱国 • 2024-08-20 00:20 • 行业动态 • 阅读 16

分块上传回调是指在文件传输过程中，将大文件分割成多个小块进行上传，并在每个小块上传完成后触发的回调函数。这有助于提高上传效率和稳定性，同时可以在上传过程中实时获取进度信息，以便进行相应的处理或展示。

分块上传回调（Upload Callback）是一种在文件上传过程中，当某个分块上传完成时触发的事件，这种回调机制可以帮助开发者更好地了解上传进度，实现一些自定义的功能，如显示进度条、暂停和恢复上传等。

（图片来源网络，侵删）

以下是一个使用JavaScript和HTML5实现的分块上传回调示例：

1、在HTML中创建一个文件输入框和一个进度条：

<input type="file" id="fileInput" />
<progress id="progressBar" value="0" max="100"></progress>

2、在JavaScript中编写上传逻辑和回调函数：

// 获取文件输入框和进度条元素
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');
// 监听文件输入框的变化事件
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  uploadFile(file);
});
// 定义上传文件函数
function uploadFile(file) {
  // 创建一个FormData对象，用于存储分块数据
  const formData = new FormData();
  formData.append('file', file);
  // 设置请求头，允许跨域请求
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  // 监听上传进度事件
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      progressBar.value = percentComplete;
    }
  });
  // 监听上传完成事件
  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('上传成功');
    } else {
      console.error('上传失败');
    }
  };
  // 发送分块请求，这里以1MB为一个分块
  const chunkSize = 1024 * 1024;
  let start = 0;
  let end = chunkSize;
  while (start < file.size) {
    end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    formData.append('file', chunk, file.name);
    xhr.open('POST', '/upload', true);
    xhr.send(formData);
    start = end;
    end += chunkSize;
  }
}

在这个示例中，我们使用了HTML5的FileReader和XMLHttpRequestAPI来实现分块上传，当文件上传进度发生变化时，会触发progress事件，我们可以在这个事件的回调函数中更新进度条的值，当文件上传完成时，会触发onload事件，我们可以在这个事件的回调函数中处理上传成功或失败的情况。