根据正确的扩展名，给与正确的 Content-Type，匹配正确的 icon

给与正确的 Content-Type

创建 mime 模块，根据文件的路径 filepath 来确定扩展名

const path = require('path');

const mimeLists = {
  css: 'text/css',
  html: 'text/html',
  js: 'text/javascripte',
  xml: 'text/xml',
  gif: 'image/gif',
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  png: 'image/jpeg',
  json: 'application/json'
};


function mimeType(filepath) {
  let ext = path.extname(filepath)
    .split('.')   // jquery.min.js
    .pop()        //取最后的那个为扩展名
    .toLocaleLowerCase(); //转成小写

  if (!ext) {
    ext = path.basename(filepath);
  }

  return mimeLists[ext] || 'text/plain';

}

module.exports = mimeType;

匹配正确的 icon

给每个文件或文件夹配上图标

//route 文件修改渲染的 data 数据，为 files 添加 icon 属性

let data = {
    title: path.basename(filePath), /*title 为文件名*/
    dir: dir ? `/${dir}` : '',      /*title 为文件所在的文件夹路径*/
    files: files.map(file => {      /*files 是一个数组，为文件列表*/
        return {
            file,
            icon: mimeType(file)
        };
    })   
};

//同时也要修改模板文件

{{#each files}}
  <a class="directory" href="{{../dir}}/{{file}}">【{{icon}}】{{file}}</a>
{{/each}}

然后我们把 icon 的文字替换成对应的 img 标签，匹配正确的 href 就可以了

[图片上传失败...(image-b3a25d-1512783951647)]