面试官：大文件上传怎么实现？断点续传怎么实现？文件流下载怎么实现？
大文件上传和断点续传的流程
前端大文件上传和断点续传的流程通常包括以下步骤：
- 选择文件： 用户在前端界面选择要上传的大文件。
- 计算文件哈希： 为了唯一标识文件并实现断点续传，前端通常会使用文件内容的哈希值作为文件的标识符。通过计算文件内容的哈希值，可以确保同一文件内容生成的哈希值是相同的，从而方便后续的断点续传。
- 查询已上传的文件块： 在继续上传之前，前端会发送一个查询已上传文件块的请求到后端。这个请求用于获取已经上传成功的文件块列表，以便在继续上传时跳过已上传的部分。
- 分块上传： 前端将大文件分割成多个块，并逐个上传到后端。通常情况下，每个文件块的大小是固定的，并且文件块的数量根据文件大小来确定。在上传过程中，前端会记录已经成功上传的文件块，并在下次继续上传时跳过这些文件块。
- 上传进度显示： 前端会实时显示文件上传的进度，以便用户了解上传的进展情况。
- 断点续传： 如果上传过程中出现中断（例如网络中断或用户关闭浏览器），前端可以通过记录已上传的文件块，并在继续上传时跳过这些文件块，实现断点续传的功能。这样可以节省用户重新上传文件的时间，提高用户体验。
- 上传完成处理： 当所有文件块都上传完成后，前端会显示上传完成的消息，并且可以进行后续的操作，例如显示上传成功的文件链接或其他相关信息。
参考链接：大文件上传优化（切片、断点续传、秒传）
文件流下载
前端实现文件流下载通常涉及以下步骤：
- 构建文件流： 在前端，通常是通过 AJAX 请求获取文件的数据流（或者 Blob 对象），而不是直接通过常规的 URL 下载文件。
- 创建下载链接： 将获取到的文件流或 Blob 对象转换成 URL，然后将这个 URL 赋给下载链接的 href 属性。
- 设置下载属性： 设置下载链接的 download 属性，以指定文件下载时的文件名。
- 触发下载： 通过点击下载按钮或其他方式触发下载链接，从而开始文件下载。
以下是一个简单的示例代码，演示了如何在前端实现文件流下载：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Stream Download</title>
</head>
<body>
<h1>File Stream Download</h1>
<button onclick="downloadFile()">Download File</button>
<script>
async function downloadFile() {
try {
// 发送 AJAX 请求获取文件流数据
const response = await fetch('/download', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
const blob = await response.blob();
// 将文件流转换成 URL
const url = window.URL.createObjectURL(blob);
// 创建下载链接
const link = document.createElement('a');
link.href = url;
// 设置下载属性
link.setAttribute('download', 'example.txt');
// 触发下载
link.click();
} catch (error) {
console.error('Error:', error);
}
}
</script>
</body>
</html>在这个示例中，当用户点击 "Download File" 按钮时，会发送一个 AJAX 请求到后端 /download 接口获取文件流数据。获取到数据后，将其转换成 Blob 对象，并创建一个下载链接，设置下载属性为指定的文件名 "example.txt"，最后触发下载链接的点击事件，即可开始文件下载。
版权申明
本文系作者 @K 原创发布在前端面试题大全站点。未经许可，禁止转载。
暂无评论数据