node+axios实现服务端文件上传示例

下面是针对使用node和axios实现服务端文件上传的完整攻略。

1. 安装依赖

在开始代码实现之前，需要先安装一些必要的依赖包。这里我们需要下载express、body-parser和multer这三个包。其中，express用来搭建服务器，body-parser用于解析POST请求中的body，multer用于处理文件上传。

npm install express body-parser multer --save

2. 创建服务端

我们先创建一个Node.js的HTTP服务器，它可以监听port 3000端口，并处理来自客户端的POST请求，用于实现文件上传。

// 引入所需依赖
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');

// 创建Express实例
const app = express();

// 创建文件上传的存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
});

// 创建文件上传的中间件
const upload = multer({ storage: storage });

// 让Express支持解析POST请求体
app.use(bodyParser.urlencoded({ extended: true }));

// 定义接收文件上传请求的路由
app.post('/upload', upload.single('file'), function (req, res) {
  console.log(req.file);
  res.send('文件上传成功！');
});

// 启动服务器
app.listen(3000, function () {
  console.log('服务已启动，监听3000端口');
});

3. 编写客户端代码

前端可以使用axios库来发送POST请求，从而实现文件上传的功能。以下是一个用于发送带有文件数据的POST请求的指南：

// 导入所需依赖
import axios from 'axios';

// 获取表单数据
const formData = new FormData();
formData.append('file', fileInput.files[0]);

// 发送POST请求
axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
}).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.log(error);
});

4. 示例说明

示例一：多文件上传

如果要上传多个文件，只需要在表单中为每个文件添加一个file类型的输入框，并使用FormData对象把它们一起发送到服务器。

<form id="upload-form">
  <input type="file" name="file1"><br>
  <input type="file" name="file2"><br>
  <input type="file" name="file3"><br>
  <button type="submit">上传</button>
</form>

const formElem = document.querySelector('#upload-form');
const formData = new FormData(formElem);

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

示例二：实现带进度条的上传

实现带进度条的上传可以使用axios的onUploadProgress回调函数，它会在文件上传进度改变时被调用，可以获取如下内容：

• loaded：已上传的文件字节数
• total：文件总大小

const formElem = document.querySelector('#upload-form');
const formData = new FormData(formElem);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: function(progressEvent) {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
}).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.log(error);
});

以上就是基于node和axios实现服务端文件上传的完整攻略，希望对你有所帮助。