koa2路由从服务器获取文件列表发送到vue前端并渲染缩略图、文件名等信息

1. 服务器端koa2路由代码（假设文件存放在public/files目录下）：

const Koa = require('koa');
const Router = require('koa-router');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs');

const app = new Koa();
const router = new Router();

// 静态文件服务
app.use(serve(path.join(__dirname, 'public')));

// 获取文件列表路由
router.get('/fileList', async (ctx, next) => {
  try {
    const files = fs.readdirSync(path.join(__dirname, 'public', 'files'));
    const fileList = [];
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const fileInfo = fs.statSync(path.join(__dirname, 'public', 'files', file));
      fileList.push({
        name: file,
        size: fileInfo.size,
        time: fileInfo.mtime
      });
    }
    ctx.body = fileList;
  } catch (err) {
    console.error(err);
    ctx.status = 500;
    ctx.body = '服务器错误';
  }
});

app.use(router.routes());

app.listen(3000);
console.log('Server running on http://localhost:3000');

2. 在前端Vue组件中使用axios获取文件列表并渲染缩略图、文件名等信息：

<template>
  <div>
    <div v-for="file in fileList" :key="file.name">
      <img :src="`/files/${file.name}`" width="100" height="100" />
      <div>{{ file.name }}</div>
      <div>{{ getFileSize(file.size) }}</div>
      <div>{{ formatDate(file.time) }}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: []
    };
  },
  mounted() {
    axios.get('/fileList').then(res => {
      this.fileList = res.data;
    }).catch(err => {
      console.error(err);
    });
  },
  methods: {
    getFileSize(size) {
      if (size < 1024) {
        return `${size}B`;
      } else if (size < 1024 * 1024) {
        return `${(size / 1024).toFixed(2)}KB`;
      } else if (size < 1024 * 1024 * 1024) {
        return `${(size / 1024 / 1024).toFixed(2)}MB`;
      } else {
        return `${(size / 1024 / 1024 / 1024).toFixed(2)}GB`;
      }
    },
    formatDate(time) {
      const date = new Date(time);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    }
  }
};
</script>