JS 分块上传图片到服务器
时间: 2024-10-06 21:01:27 浏览: 15
在JavaScript中,分块上传图片通常用于处理大文件,避免一次性加载过多数据导致性能问题。这种技术叫做“断点续传”或“chunked upload”。以下是基本步骤:
1. **选择文件**:使用HTML5的File API让用户选择图片文件。
```javascript
<input type="file" id="imageFile" />
```
2. **读取文件**:将文件分割成多个小块(比如每个4KB),可以用`FileReader`的`slice`方法。
```javascript
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(e) {
var chunks = [];
for (var i = 0; i < e.target.result.byteLength; i += chunkSize) {
chunks.push(e.target.result.slice(i, i + chunkSize));
}
};
```
3. **创建xhr请求**:使用XMLHttpRequest对象或fetch API发起HTTP请求,并设置适当的Content-Length头和分块上传的逻辑。
```javascript
function sendChunk(chunkIndex, chunkData) {
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'upload-url', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.setRequestHeader('Content-Length', chunkData.byteLength);
xhr.upload.onprogress = handleProgress;
xhr.send(new Blob([chunkData], {type: 'application/octet-stream'}), chunkIndex);
}
// 进度处理函数
function handleProgress(e) {
if (e.lengthComputable) {
console.log(`Uploading ${e.loaded} / ${e.total}`);
}
}
```
4. **合并上传**:在所有块都上传完毕后,服务器端通常需要确认所有的块已经接收并组合成完整的图片。这可能需要通过返回一个特定的标识符或状态来触发。
5. **错误处理**:处理网络中断、超时等情况,确保用户能继续或重新开始上传。