# file-slicing

**Repository Path**: kayanchan/file-slicing

## Basic Information

- **Project Name**: file-slicing
- **Description**: 前端切片相关实现
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-19
- **Last Updated**: 2024-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: file-slicing

## README

# File Slicing

前端文件切片（File Slicing）是一种优化文件处理的技术，它允许将一个大文件分割成多个较小的片段（chunks），以便于更高效地处理、上传或下载。

## 原理逻辑

1. 分割文件：将一个大文件分割成多个较小的片段

2. 处理片段：对每个片段进行独立处理，例如上传、压缩或加密

3. 重组文件：在服务器端或客户端将所有片段重新组合成原始文件


## File
在Web开发中，File 对象主要用于表示用户计算机上的一个文件，它通常与文件输入元素（`<input type="file">`）一起使用，以便用户可以选择并上传文件到服务器。

### File对象属性

- lastModified: 文件的最后修改日期。只读时间戳。

- lastModifiedDate

- name: 文件的名称。只读字符串

- size: 文件的大小，单位为字节(KB)。只读。

- type: 文件的MIME类型（如果浏览器知道的话）。只读字符串。

- webkitRelativePath

### File对象方法

- slice(): 创建文件片段

### 与Blob对象的关系

File对象实际是继承自Blob对象，因而具有Blob的所有属性和方法，如 `slice()`。

File对象也因此非常适合用于处理二进制数据。

### FileReader

FileReader API 允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

```javascript
const reader = new FileReader();

reader.onload = function(event) {
  const content = event.target.result; // 文件内容
  console.log(content);
};

reader.readAsText(file); // 以文本格式读取文件
```

### 注意

- 出于安全原因，JavaScript不能直接访问用户计算机上的文件，只能通过文件输入元素 `<input type="file" />` 来选择文件

- File对象实现拖放上传功能

- File 对象通常与 FormData 对象一起使用，以便通过 AJAX 将文件上传到服务器


## 实现步骤

### 获取文件对象

```javascript
<input type="file" id="fileInput" />
<script>
  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    console.log(file)
    // 进行文件切片处理
  });
</script>
```

### 分割文件

使用 File.slice 方法将文件分割成多个片段

```javascript

  const chunkSize = 1024 * 1024; // 每个片段的大小，例如1MB

  const chunks = Math.ceil(file.size / chunkSize); // 计算需要的片段数量

  const fileSilces = [];

  for(let i=0; i<chunks; i++) {

    const start = i * chunkSize;

    const end = Math.min(file.size, start + chunkSize);

    const chunk = file.slice(start, end);

    fileSilces.push(chunk);
  }

  console.log(fileSilces); // [Blob {size: 1048576, type: ''}, Blob {size: 249453, type: ''}]

```

### 处理片段

```javascript
fileSlices.forEach((chunk, index) => {
  const formData = new FormData();
  formData.append('file', chunk);
  formData.append('chunkIndex', index);
  formData.append('totalChunks', chunks);
  formData.append('fileName', file.name);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log(`Chunk ${index} uploaded successfully`);
  })
  .catch(error => {
    console.error(`Error uploading chunk ${index}:`, error);
  });
});
```

### 前端重组片段

在前端重组文件片段涉及以下步骤：

1. 获取所有文件片段

2. 创建一个Blob对象（使用JavaScript的Blob对象来存储和重组文件片段。Blob对象表示不可变的原始数据的类文件对象。）

3. 使用FileReader读取片段（如果片段存储在客户端（例如IndexedDB），你可以使用FileReader来异步读取每个片段的内容。）

4. 追加片段到Blob（将每个读取的片段追加到一个新的Blob对象中。）

5. 创建一个URL或下载文件（所有片段都被追加到Blob对象中，就可以创建一个指向该Blob的URL，或者直接下载文件。）

```javascript
  // 创建一个新的Blob对象，将所有片段追加到其中
  const reassembledBlob = new Blob(fileSilces, { type: 'application/octet-stream' });
  // 创建一个指向重组文件的URL
  const url = URL.createObjectURL(reassembledBlob);
  // 创建一个下载链接
  const a = document.createElement('a');
  a.href = url;
  a.download = 'reassembled-file.jpg'; // 设置下载文件的名称
  document.body.appendChild(a);
  a.click();

  // 清理
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
```

**注意事项**

- 确保所有片段都按照正确的顺序追加到Blob对象中

- 根据实际情况调整Blob对象的MIME类型

- 如果片段存储在服务器上，你可能需要通过AJAX请求来获取它们

- 处理大文件时要注意内存使用情况，避免浏览器崩溃

### 后端重组片段

```javascript
const fs = require('fs');
const path = require('path');

app.post('/upload', (req, res) => {
  const chunkIndex = req.body.chunkIndex;
  const totalChunks = req.body.totalChunks;
  const fileName = req.body.fileName;
  const chunk = req.files.file;

  const uploadPath = path.join(__dirname, 'uploads', `${fileName}.part${chunkIndex}`);
  fs.writeFileSync(uploadPath, chunk.data);

  if (chunkIndex == totalChunks - 1) {
    const finalFilePath = path.join(__dirname, 'uploads', fileName);
    const writeStream = fs.createWriteStream(finalFilePath);

    for (let i = 0; i < totalChunks; i++) {
      const partPath = path.join(__dirname, 'uploads', `${fileName}.part${i}`);
      const partData = fs.readFileSync(partPath);
      writeStream.write(partData);
      fs.unlinkSync(partPath); // 删除片段文件
    }

    writeStream.end();
    res.json({ message: 'File uploaded successfully' });
  } else {
    res.json({ message: `Chunk ${chunkIndex} uploaded successfully` });
  }
});
```