如何让你做一个文件无刷新上传的功能，你有哪些方法可以做到？

要实现前端文件无刷新上传，主要有以下几种方法：

1. 使用 FormData 和 XMLHttpRequest/Fetch API:

这是最常用的方法，兼容性好，可以自定义上传进度和错误处理。

• 创建 FormData 对象: FormData 对象可以模拟表单提交，用于存储上传的文件和其他数据。
• 使用 XMLHttpRequest 或 Fetch API 发送请求: 将 FormData 对象作为请求体发送到服务器。
• 监听上传进度: 可以使用 XMLHttpRequest 的 upload.onprogress 事件或 Fetch API 的 ReadableStream 来监听上传进度。
• 处理服务器响应: 在 onload 事件中处理服务器返回的数据。

const fileInput = document.getElementById('fileInput');
const uploadForm = document.getElementById('uploadForm');

uploadForm.addEventListener('submit', (event) => {
  event.preventDefault();

  const file = fileInput.files[0];
  const formData = new FormData();
  formData.append('file', file);

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

  xhr.upload.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      console.log(`Uploaded ${percentComplete}%`);
    }
  };

  xhr.onload = () => {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('Upload successful:', xhr.response);
    } else {
      console.error('Upload failed:', xhr.status, xhr.statusText);
    }
  };

  xhr.onerror = () => {
    console.error('Upload error');
  };

  xhr.send(formData);
});


// 使用Fetch API的示例:
async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

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

    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}`);
    }

    const data = await response.json();
    console.log('Upload successful:', data);

  } catch (error) {
    console.error('Upload failed:', error);
  }
}

2. 使用 Axios 库:

Axios 是一个流行的 JavaScript HTTP 客户端库，可以简化 AJAX 请求的编写。

import axios from 'axios';

const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  onUploadProgress: (progressEvent) => {
    const percentComplete = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Uploaded ${percentComplete}%`);
  },
})
  .then((response) => {
    console.log('Upload successful:', response.data);
  })
  .catch((error) => {
    console.error('Upload failed:', error);
  });

3. 使用 HTML5 的 File API 配合 FileReader API (适合小文件，base64编码):

对于小文件，可以直接使用 FileReader API 将文件读取为 Base64 字符串，然后通过 AJAX 发送到服务器。这种方法的优点是简单，缺点是对于大文件效率较低，并且会增加数据传输量。

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const base64String = e.target.result;

    fetch('/upload', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ file: base64String }),
    })
    .then(response => response.json())
    .then(data => console.log('Upload successful:', data))
    .catch(error => console.error('Upload failed:', error));
  };

  reader.readAsDataURL(file);
});

选择哪种方法取决于项目需求：

• 对于大文件上传，建议使用 FormData 和 XMLHttpRequest/Fetch API 或 Axios，可以监听上传进度。
• 对于小文件