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

最新推荐文章于 2024-08-20 22:16:40 发布

原创

最新推荐文章于 2024-08-20 22:16:40 发布 · 1.5k 阅读

标签

#HTML #前端 #web #JavaScript #H5

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

引言

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

基本概念与作用

定义

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

作用

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

技术栈

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

示例一：基本文件上传

HTML

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

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);
  });
});