JS 上传音频超过3M 如何分块上传 JS代码
时间: 2024-10-14 14:06:41 浏览: 2
在JavaScript中,如果需要上传大文件如超过3MB的音频,通常采用分块上传(也称为断点续传)的方式来处理,这样可以避免一次性加载大文件导致的网络请求失败或用户体验变差。以下是使用Blob API和Fetch API实现分块上传的一个简单示例:
```javascript
// 假设我们有最大允许上传的块大小(例如500KB)
const MAX_CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
async function uploadFileInChunks(file) {
const reader = new FileReader();
let totalSize = file.size;
let start = 0;
while (start < totalSize) {
const chunkSize = Math.min(MAX_CHUNK_SIZE, totalSize - start);
// 创建一个数据URL表示当前的块
const blob = file.slice(start, start + chunkSize);
const url = URL.createObjectURL(blob);
try {
const response = await fetch('/api/upload', {
method: 'POST',
headers: {'Content-Type': 'application/octet-stream'},
body: blob,
});
// 检查服务器响应,通常会有进度指示或状态码
if (!response.ok) {
throw new Error('Upload failed');
}
console.log(`Uploaded chunk ${start}-${start + chunkSize - 1}`);
// 更新开始位置并继续下一块
start += chunkSize;
} catch (error) {
// 处理错误,如网络中断,然后尝试重新连接
console.error(error);
break;
}
}
// 文件上传完毕后释放URL
URL.revokeObjectURL(url);
}
// 当用户选择文件时,调用这个函数
input.addEventListener('change', async function(e) {
const file = e.target.files[0];
if (file.size > MAX_CHUNK_SIZE) {
uploadFileInChunks(file);
}
});
```