发布于 由admin

UniApp上传大文件分片上传实现

📝 UniApp大文件分片上传讲座：轻松搞定超大文件的云端之旅

大家好，欢迎来到今天的UniApp技术讲座！今天我们要聊的是一个非常实用的话题——大文件分片上传。想象一下，你有一个几GB的视频或者几十MB的高清图片，直接上传到服务器可能会遇到各种问题：网络中断、上传超时、内存溢出……这时候，分片上传就派上用场了！它就像把一个大蛋糕切成小块，一块一块地送到目的地，既安全又高效。

1. 为什么需要分片上传？ 🤔

在传统的文件上传中，我们通常是将整个文件一次性发送到服务器。这种方式虽然简单，但在处理大文件时会遇到不少问题：

  • 网络不稳定：如果网络突然断开，整个上传过程就会失败，用户需要重新上传。
  • 上传超时：大多数服务器都有上传时间限制，大文件可能因为上传时间过长而被中断。
  • 内存占用高：大文件会占用大量的内存资源，尤其是在移动设备上，可能导致应用崩溃。

为了解决这些问题，分片上传应运而生。它的核心思想是将文件分成多个小片段（分片），逐个上传，最后在服务器端进行合并。这样不仅可以避免上述问题，还能支持断点续传，提升用户体验。

2. 分片上传的基本原理 🛠️

分片上传的核心步骤可以概括为以下几步：

  1. 切片：将大文件按照指定的大小（如1MB）切割成多个小片段。
  2. 上传：逐个上传这些分片，每个分片可以独立上传，互不影响。
  3. 校验：上传完成后，服务器会对每个分片进行校验，确保数据完整无误。
  4. 合并：所有分片上传完毕后，服务器将这些分片合并成原始文件。

听起来是不是很简单？接下来，我们就用代码来实现这个过程！

3. 使用UniApp实现分片上传 🚀

3.1 准备工作

首先，我们需要准备一些工具和环境：

  • 前端：使用UniApp框架，它可以兼容H5、小程序、App等多个平台。
  • 后端：假设我们使用Node.js作为后端服务器，配合Express框架来处理文件上传。
  • 文件切片库：我们可以使用FileReader API来读取文件并进行切片。

3.2 文件切片

在前端，我们需要编写代码来将文件切分成多个分片。这里我们使用FileReader来逐个读取文件的片段，并将其转换为Base64编码或Blob对象。

function sliceFile(file, chunkSize) {
  const chunks = [];
  let start = 0;
  let end = chunkSize;

  while (start < file.size) {
    chunks.push(file.slice(start, end));
    start = end;
    end += chunkSize;
  }

  return chunks;
}

// 示例：将文件按1MB切片
const file = this.$refs.fileInput.files[0];
const chunkSize = 1 * 1024 * 1024; // 1MB
const chunks = sliceFile(file, chunkSize);

3.3 逐个上传分片

接下来，我们将每个分片通过uni.uploadFile接口上传到服务器。为了确保上传的顺序，我们可以使用Promise.all来并发上传多个分片，或者使用递归函数依次上传。

async function uploadChunks(chunks, file) {
  for (let i = 0; i < chunks.length; i++) {
    const chunk = chunks[i];
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', chunks.length);
    formData.append('fileName', file.name);

    try {
      const res = await uni.uploadFile({
        url: 'https://your-server.com/upload', // 服务器地址
        filePath: chunk, // 分片文件
        name: 'file',
        formData: {
          chunkIndex: i,
          totalChunks: chunks.length,
          fileName: file.name
        }
      });

      console.log(`分片 ${i + 1} 上传成功`);
    } catch (error) {
      console.error(`分片 ${i + 1} 上传失败`, error);
      // 可以在这里实现断点续传逻辑
    }
  }
}

3.4 服务器端处理

在服务器端，我们需要接收每个分片并将它们保存到临时目录中。当所有分片上传完成后，再将这些分片合并成完整的文件。

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.post('/upload', async (req, res) => {
  const { chunkIndex, totalChunks, fileName } = req.body;
  const tempDir = path.join(__dirname, 'temp', fileName);
  const chunkPath = path.join(tempDir, `${chunkIndex}.part`);

  // 保存分片到临时目录
  fs.writeFileSync(chunkPath, req.file.buffer);

  // 检查是否所有分片都已上传
  if (parseInt(chunkIndex) === parseInt(totalChunks) - 1) {
    await mergeChunks(fileName, totalChunks);
  }

  res.send('分片上传成功');
});

async function mergeChunks(fileName, totalChunks) {
  const tempDir = path.join(__dirname, 'temp', fileName);
  const outputPath = path.join(__dirname, 'uploads', fileName);

  const writeStream = fs.createWriteStream(outputPath);

  for (let i = 0; i < totalChunks; i++) {
    const chunkPath = path.join(tempDir, `${i}.part`);
    const readStream = fs.createReadStream(chunkPath);
    readStream.pipe(writeStream, { end: false });

    readStream.on('end', () => {
      fs.unlinkSync(chunkPath); // 删除分片
    });
  }

  writeStream.end();
  console.log(`${fileName} 合并完成`);
}

3.5 断点续传

在实际应用中，网络可能会中断，导致部分分片上传失败。为了提高用户体验，我们可以实现断点续传功能。具体思路是：在每次上传前，先检查服务器上已经存在的分片，跳过已经上传的分片，只上传未完成的部分。

async function checkUploadedChunks(fileName, totalChunks) {
  const tempDir = path.join(__dirname, 'temp', fileName);
  const uploadedChunks = [];

  for (let i = 0; i < totalChunks; i++) {
    const chunkPath = path.join(tempDir, `${i}.part`);
    if (fs.existsSync(chunkPath)) {
      uploadedChunks.push(i);
    }
  }

  return uploadedChunks;
}

async function resumeUpload(chunks, file, uploadedChunks) {
  const remainingChunks = chunks.filter((_, index) => !uploadedChunks.includes(index));

  await uploadChunks(remainingChunks, file);
}

4. 性能优化与注意事项 ⚡

在实现分片上传的过程中，我们还需要注意一些性能优化和潜在的问题：

  • 分片大小的选择：分片过大可能导致单次上传时间过长，分片过小则会增加HTTP请求的次数。一般来说，1MB左右的分片大小是比较合理的。
  • 并发上传：可以使用Promise.all来并发上传多个分片，但要注意不要同时发起过多请求，以免占用过多带宽或服务器资源。可以通过Promise.allSettled来处理并发上传的结果。
  • 文件校验：为了确保文件完整性，可以在上传每个分片时计算其哈希值（如MD5），并在服务器端进行校验。只有当所有分片的哈希值匹配时，才进行合并操作。
  • 进度条显示：为了让用户了解上传进度，可以在前端实现一个简单的进度条。每上传一个分片，更新进度条的百分比。

5. 总结 🎉

通过今天的讲座，我们学习了如何在UniApp中实现大文件的分片上传。分片上传不仅解决了大文件上传过程中可能出现的各种问题，还提供了断点续传的功能，大大提升了用户体验。希望这篇文章能够帮助你在实际项目中更好地处理大文件上传的需求。

如果你还有任何疑问，欢迎在评论区留言，我会尽力为你解答！ 😊

参考资料：

感谢大家的聆听，下次再见！ 👋

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注