静态资源

mime解析

static-files.js

const path = require('path');
const mime = require('mime');
const fs = require('mz/fs');
// url: 类似 '/static/'
// dir: 类似 __dirname + '/static'
function staticFiles(url, dir) {
  return async (ctx, next) => {
    let rpath = ctx.request.path;
    // 判断是否以指定的url开头:
    if (rpath.startsWith(url)) {
      // 获取文件完整路径:
      let fp = path.join(dir, rpath.substring(url.length));
      // 判断文件是否存在:
      if (await fs.exists(fp)) {
        // 查找文件的mime:
        ctx.response.type = mime.getType(rpath);
        // 读取文件内容并赋值给response.body:
        ctx.response.body = await fs.readFile(fp);
      } else {
        // 文件不存在:
        ctx.response.status = 404;
      }
    } else {
      // 不是指定前缀的URL,继续处理下一个middleware:
      await next();
    }
  };
}
module.exports = staticFiles;

注意到使用到了mime模块,用于解析mime类型,之前一直是使用mime.lookup,使用的时候疯狂报错,查看了官方文档,才知道换成了mime.getType,官方文档永远是最好的参考。 参考链接

app.js

const staticFiles = require('./static-files');
app.use(staticFiles('/static/', __dirname + '/static'));

在浏览器输入http://localhost:3000/static/xxx即可直接访问静态资源。

koa-static

Koa提供了一个更简单的中间件 koa-static 处理静态资源

const path = require('path');
const staticFiles = require('koa-static');
const route = require('koa-route');
const main = staticFiles(path.join(__dirname, 'public'));
app.use(main);

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress