js 实现异步上传
异步上传的实现方法
使用 JavaScript 实现异步上传可以通过多种方式完成，以下是几种常见的方法：
XMLHttpRequest (XHR)
XMLHttpRequest 是传统的异步上传方式，适用于大多数现代浏览器。
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.error('上传失败');
}
};
xhr.send(formData);Fetch API
Fetch API 提供了更现代、更简洁的异步上传方式。
const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
console.log('上传成功');
} else {
console.error('上传失败');
}
})
.catch(error => console.error('上传错误:', error));Axios
Axios 是一个流行的 HTTP 客户端库，支持异步上传。
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => console.log('上传成功'))
.catch(error => console.error('上传失败:', error));进度监控
如果需要监控上传进度，可以使用 XHR 或 Axios 提供的进度事件。
XHR 进度监控
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(`上传进度: ${percentComplete}%`);
}
};Axios 进度监控
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: function(progressEvent) {
const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
console.log(`上传进度: ${percentComplete}%`);
}
});文件分块上传
对于大文件，可以考虑分块上传以提高可靠性和性能。
const chunkSize = 1024 * 1024; // 1MB
const file = fileInput.files[0];
const totalChunks = Math.ceil(file.size / chunkSize);
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
const chunkFormData = new FormData();
chunkFormData.append('chunk', chunk);
chunkFormData.append('chunkIndex', i);
chunkFormData.append('totalChunks', totalChunks);
chunkFormData.append('fileName', file.name);
fetch('/upload-chunk', {
method: 'POST',
body: chunkFormData
})
.then(response => console.log(`分块 ${i} 上传成功`))
.catch(error => console.error(`分块 ${i} 上传失败:`, error));
}错误处理
无论使用哪种方法，都应该包含适当的错误处理逻辑。
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP 错误: ${response.status}`);
}
return response.json();
})
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传过程中出错:', error));跨域上传
如果需要跨域上传，确保服务器配置了 CORS 头部。
fetch('https://other-domain.com/upload', {
method: 'POST',
body: formData,
mode: 'cors',
credentials: 'include' // 如果需要发送 cookies
})
.then(response => console.log('跨域上传成功'))
.catch(error => console.error('跨域上传失败:', error));这些方法涵盖了 JavaScript 中实现异步上传的主要技术，可以根据具体需求选择最适合的方案。
