JS 上传音频超过5M 如何分块上传 JS代码
时间: 2024-10-14 17:14:59 浏览: 2
在 JavaScript 中,当需要上传大于5MB的音频文件时,通常采用分块上传(也称为断点续传)的方式,以避免浏览器一次加载过多的数据导致内存溢出或网络请求失败。以下是使用 Fetch API 或 Axios 进行分块上传的一个简化示例:
```javascript
const chunkSize = 10 * 1024 * 1024; // 分块大小(例如10MB)
let totalBytesRead = 0;
// 音频文件对象
const audioFile = document.querySelector('input[type=file]').files[0];
async function uploadAudio(file) {
const reader = new FileReader();
reader.readAsArrayBuffer(file);
while (totalBytesRead < file.size) { // 循环直到读取完整个文件
const chunkStart = totalBytesRead;
const chunkEnd = Math.min(chunkStart + chunkSize, file.size);
const chunk = await new Promise((resolve, reject) => {
reader.onload = () => {
const arrayBufferChunk = reader.result.slice(chunkStart, chunkEnd);
// 发送分块请求,此处仅提供函数模板,你需要替换为实际的API调用
sendChunk(arrayBufferChunk);
resolve(); // 成功读取一块
};
reader.onerror = reject;
});
totalBytesRead += chunk.size;
}
}
function sendChunk(arrayBuffer) {
fetch('/api/upload', {
method: 'PATCH',
headers: {'Content-Type': 'application/octet-stream'},
body: arrayBuffer,
})
.then(response => response.ok ? Promise.resolve() : Promise.reject())
.catch(error => console.error('Error uploading chunk:', error));
}
uploadAudio(audioFile); // 开始上传
```
这段代码首先创建一个分块大小的 `chunkSize`,然后通过 `FileReader` 逐块读取音频文件。每读取完一块,就通过 `sendChunk` 函数发送一个 PATCH 请求,将这块数据上传到服务器。请注意,这只是一个基本框架,你需要根据实际的后端API和错误处理机制调整代码。