Axios 上传和下载文件（Excel导出）

引言

在现代Web应用中，文件上传和下载是非常常见的功能，尤其当涉及到报表、数据备份或是导出等功能时，Excel文件的处理尤为重要。本文将详细介绍如何使用Axios进行文件的上传和下载，并特别关注Excel文件的导出过程。

基本概念与作用

定义

• Axios：一个基于Promise的HTTP客户端，用于浏览器和node.js，支持浏览器标准的XMLHttpRequest和node.js的http模块。
• 文件上传：将本地文件发送到服务器端的过程。
• 文件下载：从服务器获取文件并保存到本地的过程。
• Excel导出：将数据转换成Excel文件格式并在客户端上下载。

作用

• 文件上传和下载可以用来实现数据交换、文件存储和分享等功能。
• Excel导出则适用于报表生成、数据备份等场景。

技术栈

• Axios：用于发送HTTP请求。
• JavaScript：用于处理文件和请求。
• HTML5 ：用于选择文件。
• Node.js：后端服务器环境。
• Express.js：用于搭建服务器。
• xlsx：用于生成Excel文件。

示例一：基本文件上传

HTML

<input id="file-input" type="file" />
<button id="upload-button">Upload Filebutton>

JavaScript

const fileInput = document.getElementById('file-input');
const uploadButton = document.getElementById('upload-button');

uploadButton.addEventListener('click', () => {
   
  const formData = new FormData();
  formData.append('file', fileInput.files[0]);

  axios.post('/upload', formData, {
   
    headers: {
   
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(response => {
   
    console.log('File uploaded successfully:', response.data);
  })
  .catch(error => {
   
    console.error('Error uploading file:', error);
  });
});

说明

• 使用FormData对象来封装文件数据。
• 设置Content-Type为multipart/form-data。
• 发送POST请求到服务器端的/upload路径。

示例二：服务器端文件接收