如何异步上传文件 - Javascript

在前端开发中，上传文件是一个常见的需求。但在有些场景下，我们需要异步上传文件，比如上传大文件或多个文件时，此时我们可以使用异步上传文件的方式。

概述

异步上传文件的原理是通过Ajax或Fetch等方式将文件从客户端发送到服务器，从而实现异步上传。

下面是实现异步上传文件的步骤：

• 获取要上传的文件对象；
• 创建FormData对象并将文件对象添加到其中；
• 发送Ajax或Fetch请求将FormData数据发送到服务器。

示例

以下示例使用FormData和XMLHttpRequest实现异步上传单个文件：

const fileInput = document.querySelector('#fileInput');
const form = document.querySelector('#uploadForm');
const progressBar = document.querySelector('#progressBar');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const formData = new FormData();
  const file = fileInput.files[0];
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  
  xhr.upload.addEventListener('progress', (e) => {
    const percent = e.loaded / e.total * 100;
    progressBar.value = percent;
  });

  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      console.log(xhr.responseText);
    }
  };

  xhr.send(formData);
});

以上代码中，我们在文档中添加了一个表单元素，其中包含一个file类型的input元素和一个用于显示上传进度的progress元素。

当表单提交时，我们首先从fileInput元素中获取文件对象，然后创建formData对象并将文件对象添加到其中。我们创建了XMLHttpRequest对象并打开了POST请求，并为上传进度和请求状态添加了事件处理程序。最后，我们通过调用xhr.send()方法将formData数据发送到服务器。

注意事项

• 如果需要上传多个文件，可以使用FormData的append()方法将多个文件添加到formData对象中；
• 如果使用Fetch，可通过FormData对象作为Fetch请求的body参数来发送文件数据；
• 异步上传文件需要特殊的服务端支持，通常需要服务器端根据文件名或文件类型等信息确定文件的保存位置并完成文件的保存过程。