javascript - 使用javascript将上传的文件分成多个 block

标签 javascript google-chrome base64 compression frontend

我正在寻找一种方法来在浏览器的前端拆分任何文本/数据文件,然后再将其作为多个文件上传。我的限制是每次上传 40KB。因此,如果用户上传一个 400KB 的文件,它会在前端将该文件拆分为 10 个单独的 block 或 10 个单独的文件,然后再将其上传到服务器。

目前,我正在将此文件转换为 base64 格式的字符串,然后将此字符串分成 40KB,分成 10 个单独的 block 。从那里我上传每个 block ,文件名为 chunk-1-of-10,chunk-2-of-10 ...

当下拉这些文件时,我只是将所有这些 block 连接起来并将其从 base64 反转换为其文件格式。

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

最佳答案

无需使用 FileReader 将内容读入 ram 使用 base64 只会增加您需要上传的内容的大小,base64 占用的大小增加了 ~33%

使用Blob.slice获取 block

// 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.set('data', chunk)
  
  await fetch(url, { method: 'post', body: fd }).then(res => res.text())
}

关于javascript - 使用javascript将上传的文件分成多个 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50121917/

相关文章:

javascript - Node.js 异步 waterfall ()回调已被调用

javascript - 在不使用 javascript 的情况下使内联 SVG 在浏览器中响应?

javascript - V8 javascript : chrome vs node. js - 'this' 上下文中的差异

javascript - 是否有一种方法可以覆盖 JavaScript 对象以控制 console.log 显示的内容?

javascript - 在后台打开的 chrome 选项卡中会发生(或不会发生)什么?

c# - 我无法使用Image to Base64 String函数

html - 如何保留<image> xlink :href working after base64 encode

javascript - Flex - JavaScript 适用于 bin-debug,但不适用于已部署的服务器

javascript - 删除一个类,然后将其添加回去会导致不同的显示

javascript - 给定未编码字符串的长度,哪个公式可以揭示 base-64 编码后该字符串的长度?