当前位置：首页 > JavaScript

js 实现异步上传

2026-04-04 05:01:05JavaScript

异步上传的实现方法

在JavaScript中，实现异步上传通常使用XMLHttpRequest、Fetch API或第三方库如axios。以下是几种常见方法：

使用XMLHttpRequest

XMLHttpRequest是传统的异步上传方式，兼容性较好：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功', xhr.responseText);
  } else {
    console.error('上传失败');
  }
};
const formData = new FormData();
formData.append('file', fileInput.files[0]);
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 => response.json())
.then(data => console.log('上传成功', data))
.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('上传成功', response.data))
.catch(error => console.error('上传失败', error));

进度监控

对于大文件上传，可以监控上传进度：

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
  const percent = (event.loaded / event.total) * 100;
  console.log(`上传进度: ${percent}%`);
};
xhr.open('POST', '/upload', true);
xhr.send(formData);

分片上传

对于超大文件，可采用分片上传策略：

js 实现异步上传

async function uploadChunks(file) {
  const chunkSize = 1024 * 1024; // 1MB
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('offset', offset);

    await fetch('/upload-chunk', {
      method: 'POST',
      body: formData
    });

    offset += chunkSize;
  }
}

这些方法可以根据具体需求选择使用，现代项目推荐优先考虑Fetch API或axios方案。