Vue 前端使用 Axios 上传多个文件到 Koa 后端服务器

前端 Vue 框架使用 axios 提交多个文件可以使用 FormData 对象来实现。FormData 对象可以将多个文件以表单的形式提交给后端，具体代码如下：

// 创建 FormData 对象
const formData = new FormData();
// 添加文件到 FormData 对象
formData.append('file1', file1);
formData.append('file2', file2);
// 发送请求
axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

后端 Koa 框架实现上传文件接口并保存到本地可以使用 koa-body 和 koa-static 中间件来实现。koa-body 中间件可以解析表单数据，包括文件上传，koa-static 中间件可以将上传的文件保存到指定目录。具体代码如下：

const Koa = require('koa');
const koaBody = require('koa-body');
const koaStatic = require('koa-static');
const path = require('path');

const app = new Koa();

// 设置上传文件保存目录
const uploadDir = path.join(__dirname, 'uploads');

// 使用 koa-body 中间件解析表单数据
app.use(koaBody({
  multipart: true,
  formidable: {
    uploadDir: uploadDir,
    keepExtensions: true
  }
}));

// 使用 koa-static 中间件提供静态文件服务
app.use(koaStatic(uploadDir));

// 处理上传文件的路由
app.post('/upload', async (ctx, next) => {
  const files = ctx.request.files;
  const filenames = [];
  for (const name in files) {
    const file = files[name];
    // 将上传的文件名保存到数组中
    filenames.push(file.name);
  }
  ctx.body = {
    success: true,
    filenames: filenames
  };
});

app.listen(3000);

以上代码中，上传的文件会保存到指定目录（本例中为 uploads 目录），并且提供静态文件服务。处理上传文件的路由会返回上传的文件名数组。