如何在 Deno 中实现文件分块上传？-JavaScript中文网-JavaScript教程资源分享门户

文件上传是 Web 开发中常见的需求之一，但是当我们需要上传大文件时，单次上传可能会受到一些限制，例如上传时间过长、网络不稳定等。因此，文件分块上传成为了一种解决大文件上传问题的方案。

Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境，具有高效、安全、稳定等特点，本文将介绍如何在 Deno 中实现文件分块上传。

什么是文件分块上传？

文件分块上传是将大文件分割成多个小块进行上传，每个小块大小固定，上传完成后，服务端将这些小块合并成一个完整的文件。

文件分块上传的好处在于可以通过多次上传小块来完成大文件的上传，这样可以避免单次上传时间过长、网络不稳定等问题，同时也能够更加灵活地处理上传过程中的异常情况。

如何实现文件分块上传？

在 Deno 中实现文件分块上传，我们需要注意以下几个方面：

将文件分割成多个小块
将小块上传到服务端
在服务端将小块合并成完整文件

下面我们将分别介绍如何实现这三个步骤。

1. 将文件分割成多个小块

我们可以使用 Deno 自带的 Deno.open 和 Deno.read 方法来读取文件并将其分割成多个小块。

// www.javascriptcn.com code example
async function* chunkFile(filePath: string, chunkSize: number) {
  const file = await Deno.open(filePath);
  let offset = 0;
  while (true) {
    const buffer = new Uint8Array(chunkSize);
    const { nread, eof } = await Deno.read(file.rid, buffer);
    if (nread === null) {
      break;
    }
    yield { buffer: buffer.slice(0, nread), offset };
    offset += nread;
    if (eof) {
      break;
    }
  }
  file.close();
}

上面的代码中，我们使用了 yield 关键字将每个小块返回给调用方，同时记录了每个小块在文件中的偏移量。

2. 将小块上传到服务端

在将小块上传到服务端之前，我们需要准备一个 HTTP 请求头，包含了上传文件的基本信息，例如文件名、文件类型等。

// www.javascriptcn.com code example
function createUploadHeader(
  fileName: string,
  fileSize: number,
  fileType: string,
  chunkSize: number,
  chunkIndex: number,
  chunkOffset: number,
  chunkData: Uint8Array,
): Headers {
  const headers = new Headers();
  headers.set("Content-Disposition", `attachment;filename=${fileName}`);
  headers.set("Content-Type", fileType);
  headers.set("Content-Length", `${chunkData.length}`);
  headers.set("Content-Range", `bytes ${chunkOffset}-${chunkOffset + chunkData.length - 1}/${fileSize}`);
  headers.set("X-Chunk-Size", `${chunkSize}`);
  headers.set("X-Chunk-Index", `${chunkIndex}`);
  headers.set("X-Chunk-Offset", `${chunkOffset}`);
  return headers;
}

在准备好 HTTP 请求头之后，我们可以使用 Deno 自带的 fetch 方法将小块上传到服务端。

// www.javascriptcn.com code example
async function uploadChunk(
  url: string,
  chunk: { buffer: Uint8Array; offset: number },
  fileName: string,
  fileSize: number,
  fileType: string,
  chunkSize: number,
  chunkIndex: number,
): Promise<void> {
  const { buffer, offset } = chunk;
  const headers = createUploadHeader(fileName, fileSize, fileType, chunkSize, chunkIndex, offset, buffer);
  const response = await fetch(url, {
    method: "PUT",
    body: buffer,
    headers,
  });
  if (!response.ok) {
    throw new Error(`Failed to upload chunk ${chunkIndex}`);
  }
}

在上面的代码中，我们使用了 PUT 方法将小块上传到服务端，并根据服务端返回的状态码来判断上传是否成功。

3. 在服务端将小块合并成完整文件

在服务端接收到所有小块之后，我们需要将这些小块合并成完整文件。具体实现方式可能因服务端框架不同而有所不同，这里不再赘述。

示例代码

下面是一个完整的文件分块上传的示例代码：

// www.javascriptcn.com code example
async function* chunkFile(filePath: string, chunkSize: number) {
  const file = await Deno.open(filePath);
  let offset = 0;
  while (true) {
    const buffer = new Uint8Array(chunkSize);
    const { nread, eof } = await Deno.read(file.rid, buffer);
    if (nread === null) {
      break;
    }
    yield { buffer: buffer.slice(0, nread), offset };
    offset += nread;
    if (eof) {
      break;
    }
  }
  file.close();
}

function createUploadHeader(
  fileName: string,
  fileSize: number,
  fileType: string,
  chunkSize: number,
  chunkIndex: number,
  chunkOffset: number,
  chunkData: Uint8Array,
): Headers {
  const headers = new Headers();
  headers.set("Content-Disposition", `attachment;filename=${fileName}`);
  headers.set("Content-Type", fileType);
  headers.set("Content-Length", `${chunkData.length}`);
  headers.set("Content-Range", `bytes ${chunkOffset}-${chunkOffset + chunkData.length - 1}/${fileSize}`);
  headers.set("X-Chunk-Size", `${chunkSize}`);
  headers.set("X-Chunk-Index", `${chunkIndex}`);
  headers.set("X-Chunk-Offset", `${chunkOffset}`);
  return headers;
}

async function uploadChunk(
  url: string,
  chunk: { buffer: Uint8Array; offset: number },
  fileName: string,
  fileSize: number,
  fileType: string,
  chunkSize: number,
  chunkIndex: number,
): Promise<void> {
  const { buffer, offset } = chunk;
  const headers = createUploadHeader(fileName, fileSize, fileType, chunkSize, chunkIndex, offset, buffer);
  const response = await fetch(url, {
    method: "PUT",
    body: buffer,
    headers,
  });
  if (!response.ok) {
    throw new Error(`Failed to upload chunk ${chunkIndex}`);
  }
}

async function uploadFile(
  filePath: string,
  url: string,
  chunkSize: number,
): Promise<void> {
  const fileInfo = await Deno.stat(filePath);
  const fileName = fileInfo.name;
  const fileSize = fileInfo.size;
  const fileType = Deno.build.os === "windows" ? "application/octet-stream" : "application/x-tar";
  for await (const [index, chunk] of chunkFile(filePath, chunkSize).entries()) {
    await uploadChunk(url, chunk, fileName, fileSize, fileType, chunkSize, index);
  }
}

await uploadFile("path/to/file", "http://example.com/upload", 1024 * 1024);

上面的代码中，我们通过调用 uploadFile 方法来上传文件，其中 filePath 参数为要上传的文件路径，url 参数为服务端接收文件的 URL，chunkSize 参数为每个小块的大小。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d23bf2a941bf7134440c19

如何在 Deno 中实现文件分块上传？