使用javascript将上传的文件拆分为多个块 [英] Split an uploaded file into multiple chunks using javascript

问题描述

我正在寻找一种在将浏览器前端的文本/数据文件作为多个文件上传之前对其进行拆分的方法.我的上限是每次上传40KB.因此，如果用户上传一个400KB的文件，它将在将其上传到服务器之前将该​​文件分成10个单独的块或在前端分成10个单独的文件.

I'm looking for a way to split up any text/data file on the front end in the browser before being uploaded as multiple files. My limit is 40KB per upload. So if a user uploads a 400KB file, it would split this file into 10 separate chunks or 10 separate files on the front end before uploading it to the server.

当前，我正在通过将该文件转换为base64格式的字符串，然后将该字符串拆分40KB(分成10个单独的块)来实现此目的.从那里我上传每个块，文件名分别为:chunk-1-of-10，chunk-2-of-10 ...

Currently, I'm doing it by converting this file into a base64 formatted string, then split this string by 40KB which comes out to 10 separate chunks. From there I upload each chunk as with a filename of chunk-1-of-10, chunk-2-of-10...

当拉下这些文件时，我只是将所有这些块合并在一起，然后将其从base64转换为其文件格式.

When pulling down these files, I just concat all these chunks back and deconvert it from base64 into its file format.

是否有更好的方法?是否有一个库可以处理所有这些事情，而不是从头开始编写呢?我不确定base64路由是否是执行此操作的最佳方法.

Is there a better way of doing this? Is there a library that handles all of this instead of writing it from scratch? I'm not sure if the base64 route is the best way to do this.

推荐答案

无需使用FileReader将内容读取到ram中 使用base64只会增加您需要上传的内容的大小

There is no need for reading the content into ram with the FileReader using base64 will only increase the size of what you need to upload

使用 Blob.slice 获取块

// simulate a file from a input
const file = new File(['a'.repeat(1000000)], 'test.txt')

const chunkSize = 40000
const url = 'https://httpbin.org/post'

for (let start = 0; start < file.size; start += chunkSize) {
  const chunk = file.slice(start, start + chunkSize + 1)
  const fd = new FormData()
  fd.append('data', chunk)

  await fetch(url, {method: 'post', body: fd}).then(res => res.text())
}

这篇关于使用javascript将上传的文件拆分为多个块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！