切片上传，网格进度条：文件上传那些事儿（四）

2024-01-09 12:02:24

切片上传

在前面的部分，我们已经完成了文件的切片和 hash 的计算。接下来，我们要做的就是把这些切片上传到后端。这部分没有太大的难度，按部就班的进行即可。显然，这里最关键的是如何对切片进行包装。

一种简单的方法是使用 FormData 对象。FormData 对象可以很容易地将文件切片和一些其他数据（如文件名和文件大小）组合在一起。然后，我们可以使用 XMLHttpRequest 对象将 FormData 对象发送到后端。

const formData = new FormData();
formData.append('file', fileSlice);
formData.append('filename', filename);
formData.append('filesize', filesize);

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/upload');
xhr.send(formData);

网格进度条

在切片上传的过程中，我们可以使用网格进度条来跟踪上传进度。网格进度条可以直观地显示每个切片的上传进度，从而让用户了解整个上传过程的进展。

我们可以使用 HTML5 的 progress 元素来创建网格进度条。progress 元素有 max 和 value 两个属性，我们可以使用这两个属性来控制进度条的显示。

<progress id="progress" max="100" value="0"></progress>

然后，我们可以在 XMLHttpRequest 对象的 progress 事件中更新进度条的 value 属性。

xhr.addEventListener('progress', (e) => {
  const progress = e.loaded / e.total * 100;
  document.getElementById('progress').value = progress;
});

这样，我们就可以使用网格进度条来跟踪切片上传的进度了。

合并切片

有了这些切片，我们再从前端发送一个 merge 请求，即可在后端完成切片的合并了。在切片的合并过程中，我们也可以使用网格进度条来跟踪合并进度。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/merge');
xhr.send();

xhr.addEventListener('progress', (e) => {
  const progress = e.loaded / e.total * 100;
  document.getElementById('progress').value = progress;
});