koa中静态文件资源中间件实现

2019-04-18 09:01:52来源：博客园阅读 ()

项目实践过程中，会使用非常多的静态资源，怎样可以直接在浏览器中访问到这些静态资源

const fs = require('fs');
const path = require('path');

module.exports = (dirpath = "./public") => {
    return async (ctx, next) => {
        if (ctx.url.indexOf("/public") === 0) {
            //public 开头 读取文件
            const url = path.resolve(__dirname, dirpath);
            // path.basename(p, [ext])
            // 提取出用‘/’隔开的path的最后一部分，ext是过滤字符
            // path.basename('/foo/bar/baz/asdf/quux.html', '.html') 
            // returns 
            // 'quux'
            const fileBaseName = path.basename(url); // public
            const filepath = url + ctx.url.replace("/public", "");   //得到文件目录
            console.log(filepath);
          
            try {
                //判断是否是一个文件夹
                stats = fs.statSync(filepath);
                if (stats.isDirectory()) {
                    const dir = fs.readdirSync(filepath);
                    console.log(dir);  // [ 'index.html', 'style.css' ]
                    
                    const ret = ['<div style="padding-left">'];
                    dir.forEach(filename => {
                        console.log(filename);
                        //不带小数点的格式，就是文件夹
                        if (filename.indexOf(".") > -1) {
                            ret.push(
                                `<p><a style="color:black" href="${ctx.url}/${filename}">${filename}</a></p>`)
                        } else {
                            //文件
                            ret.push(`<p><a href="${ctx.url}/${filename}">${filename}</a></p>`)
                        }

                    });
                    ret.push("</div>")
                    ctx.body = ret.join("");
                } else {
　　　　             //访问到的是一个文件，则直接读取内容
                    console.log('文件');
                    const content = fs.readFileSync(filepath);
                    ctx.body = content;
                }

            } catch (error) {
                ctx.body = "404 ,not found";
                console.log(error);
                
            }
        } else {
            //否则不是静态资源，直接去下一个中间件
            await next();
        }
    }
}

同时在我们的app文件中添加中间件的引用

```
const static = require('./static');
app.use(static('./public'));
```
便可以在浏览器中使用public目录来访问文件了
- 参考文档https://www.gregjs.com/javascript/2016/checking-whether-a-file-directory-exists-without-using-fs-exists/ 用来判断是否是一个文件夹