上传并发送文件到 axios multipart - Javascript

在使用Javascript处理文件上传时，可以使用axios库来方便地上传并发送文件到服务器。

准备工作

首先，需要安装axios库。可以使用npm进行安装：

npm install axios

接下来，需要在页面中引入axios库：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

上传文件

使用axios来上传文件非常简单，只需要使用FormData来构建数据，然后将其发送到服务器即可。

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

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response);
});

在上面的代码中，我们首先创建了一个FormData对象，并将要上传的文件添加到其中。然后，使用axios的post方法将构建好的FormData对象发送到服务器，并指定Content-Type为multipart/form-data,以便服务器能够正确解析上传的文件内容。

接收文件

在服务器端接收上传的文件时，可以使用Node.js的multer库来进行处理。multer提供了方便的接口，可以轻松地接收上传的文件，并保存到指定的位置。

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
});

在上面的代码中，我们首先使用multer创建了一个upload对象，并指定要保存的文件路径。然后，使用upload.single方法来处理上传的文件，该方法会将上传的文件保存到指定的路径，并将文件信息添加到request对象中的file属性中。

总结

通过以上的介绍，可以看出使用axios来上传文件非常简单，而且配合multer这样的服务端库，可以轻松地接收并处理上传的文件。如果你需要处理文件上传，不妨试试使用axios来实现吧！