Node 文件上传

使用node来完成文件上传的需求

项目地址:github

技术栈

• node.js
• express
• multer

multer

multer node 中专门用来处理文件上传的中间件，不是唯一

let storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 文件初始路径
    let filePath = path.join(__dirname, 'upload');
    if (!fs.existsSync(filePath)) {
      fs.mkdir(filePath, (err) => {
        if (err) {
          console.log(err)
        } else {
          cb(null, filePath)
        }
      })
    } else {
      cb(null, filePath)
    }
  },
  filename: function (req, file, cb) {
    var ext = path.extname(file.originalname);
    // UUID 处理
    function guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    }
    cb(null, file.fieldname + guid() + Date.now() + ext)
  }
})

使用HTML5专门用来处理文件的input属性file

• 注意添加form表单的 method="post" enctype="multipart/form-data"

<form class="form" action="#" method="post" enctype="multipart/form-data">
    <input type="file" name="file" class='file_up'>
    <input type="button" class='btn-primary' value="上传文件">
        </button>
</form>

遇到的问题及解决方案

文件部署

如果文件处理需要一直的修改某一文件比如data.json, 那么服务端git是没法搞得，因为每次修改之后都得重新去git pull代码，解决方案是建立一个data.json.dist 文件，告知data.json文件是存在的，然后当部署之后再生成data.json文件就可以完美解决这个问题了

url转码

使用encodeURIComponent去做url转码，因为会有&符号的存在，encodeURI是没法去处理的，会导致url地址错误

使用// 而非/ 引入外部文件

受限于https和http协议，使用 / 引入而使用https协议访问网页时会报错，并且会锁定文件，而使用 // 就可以避免这个问题从而达到自适应 协议

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap//3.3.6/css/bootstrap.min.css" />

数据的处理

注意json数据格式的转换，以及 res.end/send 数据要求

防止文件命名重复

UUID

// UUID 处理
    function guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    }

表单数据的处理

采用 XMLHttpRequest 2 的新API Formdata处理表单

node 的多进程

使用pm2通过配置可以开启多个node程序，并且窗口关闭后依然可以正常使用，结束方法为 命令 pm2 stop 'fileName' 详情参考官网

源码在文章标题下方