javascript - 使用javascript将上传的文件拆分为多个块(Split an uploaded file into multiple chunks using javascript)

Question

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.(我的上限是每次上传40KB。) 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.(因此，如果用户上传一个400KB的文件，则在将该文件上传到服务器之前，它将在前端将其拆分为10个单独的块或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.(目前，我正在通过将此文件转换为base64格式的字符串，然后将该字符串拆分40KB（分成10个单独的块）来实现。) From there I upload each chunk as with a filename of chunk-1-of-10, chunk-2-of-10...(从那里我上传每个块，文件名分别为：chunk-1-of-10，chunk-2-of-10 ...) 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.(我不确定base64路由是否是执行此操作的最佳方法。)   ask by Patoshi パトシ translate from so

Answer 1

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(无需使用base64的FileReader将内容读取到ram中，只会增加需要上传内容的大小)

Use Blob.slice to get chunks(使用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, file.name); await fetch(url, {method: 'post', body: fd}).then(res => res.text()) }