如何解决将文件拆分为 base64 较小的块时,Javascript 结果不正确
我正在尝试将文件拆分为较小的块,然后使用 peer2peer 连接将其发送给另一个用户。但这里的问题是块不正确?结果无法在远端显示相同的图像。
已测试 ~0.2kb 文件
对于整个文件:-
data:image/png;base64,iVBORw0KGgoAAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAA1BMVEWsyPiniFeoAAAAVElEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAQAAAAQAAAAAAAQAAAQAAAQAAAQAAAAQAAQ
对于分块的文件:-
- chunk1 ✅
data:application/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAA1BMVEWsyPiniFeoAAAAVElEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==
- chunk2 ❌
data:application/octet-stream;base64,AAAAAAAAAAAAAAAYAQ8AAU32ygYAAAASUVORK5CYII=
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select files with HTML and JavaScript</title>
<link rel="shortcut icon"
href="https://cdn.glitch.com/9b775a52-d700-4208-84e9-18578ee75266%2Ficon.jpeg?v=1585082912878">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<input type="file" id="file-selector"/>
<ul id="output"></ul>
<script>
const output = document.getElementById('output');
if (window.FileList && window.File) {
document.getElementById('file-selector').addEventListener('change',event => {
output.innerHTML = '';
for (const file of event.target.files) {
readFileAsync(file).then(b64Txt=>{
const div = document.createElement('p');
p.style.width = 1024;
p.style.overflowWrap = 'flex-wrap'
p.innerHTML = b64Txt;
output.appendChild(p);
});;
smallChunks(file,(chunks)=>{
chunks.forEach(b64Txt=>{
const p = document.createElement('p');
p.innerHTML = b64Txt;
output.appendChild(p);
})})
}
});
}
function readFileAsync(file) {
return new Promise((resolve,reject) => {
let reader = new FileReader();
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
function smallChunks(file,callback) {
let fileSize = file.size,chunkSize = 100,// bytes
offset = 0,blob = null,chunks = [];
const block = async function (_offset,length,_file) {
blob = _file.slice(_offset,length + _offset);
chunks.push(await readFileAsync(blob))
offset += chunkSize;
if (offset >= fileSize) {
callback(chunks);
return;
}
block(offset,chunkSize,file);
};
block(offset,file);
}
</script>
</body>
</html>
请帮忙!谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。