使用Axios上传文件的详细教程

一、Axios上传文件终止

在使用Axios上传文件时，需要注意上传的请求不同于普通的请求。上传请求需要加入FormData，把需要上传的文件放入FormData中，最后作为请求体发送至服务端。

// 安装axios
npm install axios --save

// 文件上传
let formData = new FormData();
formData.append("file", file);
axios.post("/upload", formData, {
  headers: {
    "Content-Type": "multipart/form-data"
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上面的代码是一个简单的文件上传示例，其中axios.post方法的第二个参数，就是请求体，需要传入一个FormData。FormData可以通过new FormData()创建，然后通过formData.append方法把需要上传的文件添加至其中，最后作为第二个参数传递给axios.post方法。

二、Axios传文件

文件上传本质上是文件传输，因此Axios同样可以用来传文件，只需把需要传输的文件放入请求体，通过post或其他请求方法发送至服务端即可。下面是一个简单的代码示例：

// 安装axios
npm install axios --save

// 传文件
let file = fs.readFileSync(path.join(__dirname, "sample.txt"));
axios.post("/upload", file).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上面的代码中，我们读取了一个sample.txt文件，然后使用axios.post方法将文件作为请求体发送至服务端。这里要注意的是，上面的代码只是将文件作为二进制流发送，如果服务端不支持二进制请求，可能会导致请求失败。

三、Axios上传文件到Egg

Egg.js是一个基于Node.js和Koa的企业级应用框架，它提供了非常丰富的插件和生态，可以帮助开发者快速搭建企业级应用。在Egg中，文件上传可以使用egg-multipart插件进行处理。egg-multipart提供了multipart/form-data请求的解析功能，可以很方便地处理文件上传请求。

下面是一个使用Axios上传文件到Egg的代码示例：

// 安装egg-multipart及axios
npm install egg-multipart axios --save

// 在Egg中引入multiparty
const multiparty = require("multiparty");

// 收到文件上传请求时
async upload() {
  const { ctx } = this;
  const form = new multiparty.Form();
  form.parse(ctx.req, async (err, fields, files) => {
    if (err) {
      ctx.status = 500;
      ctx.body = err;
      return;
    }
    // 处理文件上传成功后的逻辑
  });
}

// 前端代码
let formData = new FormData();
formData.append("file", file);
axios.post("/upload", formData, {
  headers: {
    "Content-Type": "multipart/form-data"
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上面的代码中，我们首先在Egg中引入了multiparty，实现了文件上传的请求处理逻辑。在前端，我们把文件添加至FormData中，然后作为请求体发送至服务端。需要注意的是，在axios请求中，我们需要设置Content-Type为multipart/form-data，这样服务端才能正确地解析请求。

四、总结

本文详细介绍了使用Axios上传文件的相关知识。Axios不仅可以实现文件上传，还可以用来传输文件。在使用文件上传时，需要注意上传请求需要使用FormData作为请求体，同时需要注意请求头的设置。此外，在Egg中使用文件上传时，需要使用multipart/form-data类型的请求，同时需要使用multiparty进行请求的解析。