前端
面试题
前端
面试题

一描述如何在前端实现文件切片以及切片上传的过程?

在前端实现文件切片及切片上传的过程主要涉及以下几个步骤：

1.1 选择文件

  • 使用HTML的<input type="file">标签让用户选择文件。
  • 监听change事件，获取选中的文件。
<input type="file" id="fileInput">
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    // 开始切片并上传逻辑
});

1.2 文件切片

  • 使用File对象的slice()方法对文件进行切片。需要指定起始字节和结束字节，或者直接指定切片大小。
function sliceFile(file, chunkSize) {
    let chunks = [];
    for (let i = 0; i < file.size; i += chunkSize) {
        let end = i + chunkSize;
        if (end > file.size) {
            end = file.size;
        }
        chunks.push(file.slice(i, end));
    }
    return chunks;
}

const chunkSize = 1 * 1024 * 1024; // 1MB为例
const fileChunks = sliceFile(file, chunkSize);

1.3 准备上传

  • 为每个切片生成唯一的标识符，便于服务器识别和重组。
  • 可以考虑为每个切片生成校验码（如MD5），上传时一起发送，用于验证数据完整性。

1.4 实现切片上传

  • 使用FormData对象封装切片数据，用于HTTP请求。
  • 发送POST请求到服务器，可能需要多次请求，每个请求携带一个切片的数据。
async function uploadChunks(chunks, fileName) {
    const url = 'your-server-api-url';
    for (let i = 0; i < chunks.length; i++) {
        const chunk = chunks[i];
        const formData = new FormData();
        formData.append('chunk', chunk, `${fileName}_chunk${i}`);
        formData.append('chunkIndex', i);
        formData.append('totalChunks', chunks.length);
        // 可以附加更多参数，如文件名、校验码等
        
        try {
            const response = await fetch(url, {
                method: 'POST',
                body: formData
            });
            if (!response.ok) {
                console.error(`Failed to upload chunk ${i}`);
                break;
            }
            console.log(`Chunk ${i} uploaded successfully`);
        } catch (error) {
            console.error(`Error uploading chunk ${i}`, error);
        }
    }
}

1.5 合并切片（服务器端操作）

  • 服务器端接收并验证所有切片，确保无遗漏和损坏。
  • 根据切片索引和总数，将所有切片按序合并成原始文件。
  • 保存或处理合并后的文件，并返回成功或失败的状态给前端。

1.6 前端处理响应

  • 根据服务器返回的信息，通知用户上传成功或处理失败的情况。
  • 实现断点续传逻辑时，还需要在上传前检查已有的切片信息，决定从哪个切片开始上传。

通过以上步骤，前端即可实现文件的切片上传，提高了大文件上传的效率和容错能力。