使用Axios进行文件上传与下载

# 1. 简介

## 1.1 什么是 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 node.js 环境中。它能够从浏览器中创建 XMLHttpRequests，也可以从 node.js 创建 http 请求。此外，它还支持拦截请求和响应，转换请求数据和响应数据，取消请求，自动转换 JSON 数据，客户端支持防止CSRF等安全性考虑。

## 1.2 文件上传与下载的重要性

文件的上传与下载是 Web 开发中常见的需求，用户可以通过这种方式在前端与后端之间交换数据。对于一些需要用户上传文件或下载文件的应用场景来说，实现文件上传与下载的功能是非常重要的。

接下来，我们将详细介绍如何使用 Axios 实现文件上传与下载的功能。

# 2. 准备工作

在进行文件上传与下载前，我们需要完成一些准备工作，包括安装 Axios 和准备服务器端代码。

### 2.1 安装 Axios

首先，我们需要在项目中安装 Axios。如果是在前端项目中使用 Axios，可以通过 npm 或 yarn 进行安装：

npm install axios

或者

yarn add axios

如果是在后端项目中（例如 Node.js 后端），同样可以通过 npm 或 yarn 进行安装。

### 2.2 服务器端准备

在服务器端，我们需要搭建接收文件上传和提供文件下载的接口。具体的实现方式会根据后端语言和框架的不同而有所调整。在这篇文章中，我们以 Node.js 为例，使用 Express 框架来演示文件上传与下载的操作。

# 3. 文件上传

文件上传是Web开发中非常常见的需求，通过Axios可以轻松实现前端与后端的文件交互。接下来我们将分别介绍前端和后端如何使用Axios来实现文件上传的功能。

#### 3.1 前端实现文件上传功能

在前端，我们可以通过简单的HTML和JavaScript代码来实现文件上传的功能。首先，我们需要一个包含文件上传功能的页面，并且在页面中添加一个文件选择按钮。

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="file">
  <button type="button" id="uploadButton">上传文件</button>
</form>

然后，在JavaScript中使用Axios来发送文件上传的请求，代码如下：

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

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('文件上传成功');
  }).c