使用javascript將上傳的文件拆分為多個塊

Question

我正在尋找一種在作為多個文件上傳之前在瀏覽器前端拆分任何文本/數據文件的方法。 我的限制是每次上傳 40KB。 因此，如果用戶上傳一個 400KB 的文件，在將其上傳到服務器之前，它會在前端將該文件拆分為 10 個單獨的塊或 10 個單獨的文件。

目前，我正在通過將此文件轉換為 base64 格式的字符串來完成此操作，然后將此字符串拆分為 40KB，從而得到 10 個單獨的塊。 從那里我上傳每個塊，文件名是 chunk-1-of-10、chunk-2-of-10...

當拉下這些文件時，我只是將所有這些塊連接回來並將其從 base64 解轉換為它的文件格式。

有沒有更好的方法來做到這一點？ 是否有一個庫可以處理所有這些而不是從頭開始編寫？ 我不確定 base64 路由是否是最好的方法。

Answer 1

無需使用使用 base64 的 FileReader 將內容讀入 ram 只會增加您需要上傳的內容的大小，base64 的大小增加了約 33%

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

Answer 2

您可以避免使用FileReader進行 base64 編碼，然后以二進制形式發送：

 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); });

 <input type="file" id="file-uploader"/>