首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用javascript将上传的文件拆分成多个块

使用javascript将上传的文件拆分成多个块
EN

Stack Overflow用户
提问于 2018-05-02 02:35:04
回答 2查看 12.9K关注 0票数 10

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

目前,我将这个文件转换成一个base64格式的字符串,然后将这个字符串拆分为40KB,得到10个独立的块。从那里我上传每个块,文件名为chunk-1- of -10,chunk-2-of-10...

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

有没有更好的方法来做这件事?有没有一个库可以处理所有这些事情,而不是从头开始编写?我不确定base64路由是否是实现此目的的最佳方法。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-05-03 17:35:10

不需要使用base64将内容读取到FileReader中只会增加您需要上传的内容的大小,base64会占用大约33%的大小

使用Blob.slice获取数据块

代码语言:javascript
运行
复制
// 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())
}
票数 14
EN

Stack Overflow用户

发布于 2018-05-02 02:51:30

您可以避免使用FileReader进行base64编码,然后以二进制形式发送:

代码语言:javascript
运行
复制
const url = 'http://www.example.com/upload';

document.getElementById('file-uploader').addEventListener('change', function(e) {
    const size = 40000;
    var reader = new FileReader();
    var buf;
    var file = document.getElementById('file-uploader').files[0];
    reader.onload = function(e) {
        buf = new Uint8Array(e.target.result);
        for (var i = 0;  i < buf.length; i += size) {
            var fd = new FormData();
            fd.append('fname', [file.name, i+1, 'of', buf.length].join('-'));
            fd.append('data', new Blob([buf.subarray(i, i + size)]));
            var oReq = new XMLHttpRequest();
            oReq.open("POST", url, true);
            oReq.onload = function (oEvent) {
               // Uploaded.
            };
            oReq.send(fd);
        }
    }
      
    reader.readAsArrayBuffer(file);
});
代码语言:javascript
运行
复制
<input type="file" id="file-uploader"/>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50121917

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档