当前位置：首页 > JavaScript

js 实现异步上传

2026-01-30 13:20:50JavaScript

异步上传的实现方法

使用XMLHttpRequest或Fetch API可以实现JavaScript的异步文件上传。以下是两种常见方法：

XMLHttpRequest方式

const uploadFile = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);

  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      console.log(`上传进度: ${percentComplete}%`);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('上传成功', xhr.responseText);
    } else {
      console.error('上传失败');
    }
  };

  xhr.send(formData);
};

Fetch API方式

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      const data = await response.json();
      console.log('上传成功', data);
    } else {
      throw new Error('上传失败');
    }
  } catch (error) {
    console.error('上传出错:', error);
  }
};

进度显示实现

通过监听上传进度事件可以实时显示上传进度：

xhr.upload.onprogress = (event) => {
  const progress = Math.round((event.loaded / event.total) * 100);
  document.getElementById('progress-bar').style.width = `${progress}%`;
  document.getElementById('progress-text').innerText = `${progress}%`;
};

多文件上传处理

对于多文件上传，可以修改FormData的构建方式：

const uploadMultipleFiles = (files) => {
  const formData = new FormData();

  Array.from(files).forEach((file, index) => {
    formData.append(`file_${index}`, file);
  });

  // 其余上传逻辑与单文件相同
};

错误处理机制

完善的错误处理应该包括：

xhr.onerror = () => {
  console.error('上传过程中发生网络错误');
};

xhr.onabort = () => {
  console.warn('用户取消了上传');
};

现代前端框架中的实现

在React中可以使用axios库：

js 实现异步上传

import axios from 'axios';

const upload = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  const config = {
    onUploadProgress: progressEvent => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(percent);
    }
  };

  try {
    await axios.post('/upload', formData, config);
  } catch (err) {
    console.error(err);
  }
};

这些方法提供了从基础到进阶的异步上传实现方案，可根据具体需求选择适合的方式。