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

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

新老客户大回馈,云服务器低至5折

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

    • 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/  用来判断是否是一个文件夹

原文链接:https://www.cnblogs.com/yinping/p/10722897.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:iview 或 element-ui table 列表表头加样式

下一篇:各国货币json文件