前言

博客的编辑功能总算做完了，总的来说还是比较简单的。但是也碰到了很多没有遇到过的技术问题，就是下面这个样子

在线编辑器选用mavon-editor，功能基本满足, 使用也比较灵活，增加了自动保存，推送、同步git仓库的功能

目录和文件的管理比较纠结，选用ElementUI或者iview等主流框架，比较熟悉且方便开发。但是相对太厚重，虽说可以按需引入，但是css样式还是需要整个引入或者通过CND加速。

所以为了简单方便不引用过多的外部插件，手写了一个树型控件，还挺简单的 ~~并没有~~

服务端基本用 fs 模块就能处理。通过接口提供CRUD的博客接口

处理图片

写博客免不了要贴图，方便示意且直观，做起来也比较简单，通过接口接受图片转换的base64就行，这样也不用额外引入库

前端

获取File对象做转换

/**
  * <input type="file" onchange="upload(this)">
  */
function upload(input) {
	const file = input.files[0]
	const reader = new FileReader()
	reader.readAsDataURL(file)
	console.log(reader.result)
}

服务端

路由接收到数据后将base64的字符串做处理然后转换为二进制存入缓冲区写入文件

/**
 * 存储图片
 * @param base64
 * @param compress
 * @param allowExtension
 * @param dist
 */
exports.saveImage = async function(base64, compress = true, allowExtension = ['png', 'jpg', 'jpeg'], dist = global.CONSTANTS.UPLOAD_DIST) {
  return new Promise((resolve, reject) => {
    // 正则去除前缀部分
    const base64Data = base64.replace(/^data:image\/\w+;base64,/, '')
    // 转换为Buffer
    const dataBuffer = Buffer.from(base64Data, 'base64')

    // 文件后缀教研
    let extension = allowExtension.filter(item => {
      return base64.includes(item)
    })
    if (!extension[0]) {
      reject(`extension is not correct, allow-extension is ${allowExtension}`)
      return
    }
    // 拼接路径生成时间戳的文件名
    extension = '.' + extension[0]
    const name = new Date().getTime() + extension
    const path = dist + '/' + name

    // 检测目录
    if (!fs.existsSync(dist)) {
      fs.mkdirSync(dist)
    }

    // 文件写入
    fs.writeFile(path, dataBuffer, err => {
      if (err) {
        global.LOGGER.error(err)
        reject(err)
      } else {
        resolve(name)
      }
    })
  })
}

处理图片

图片正确的上传到指定路径, SHADOW想当然的写一个接口,然后把图片通过流丢给前端, 而且Express的4.x版本就已经支持直接读取文件返回了app.sendFile(path 然后, 一张55kb的图片要用到2秒左右, 并且请求提示

关于提示
- 一开始觉得可能是IO流没有关闭,尝试使用res.end(),还是错误
- 回头换成res.attachment试试吧
图片返回慢
- 尝试加Expire,Cache-Control都无效，事实上通过express请求的都会默认增加请求头keep-alive
- 实际上图片上传就是做为静态资源存储的,所以为什么要用接口读取呢

直接将上传的目录交由Express做为静态资源托管就好找一下官方的API

express.static(root, [options])

The root argument specifies the root directory from which to serve static assets. The function determines the file to serve by combining req.url with the provided root directory. When a file is not found, instead of sending a 404 response, **it instead calls next() to move on to the next middleware, allowing for stacking and fall-backs. **

也就是express管理静态资源可以指定多个路径,并且按照顺序依次查找,所以写两个就好了

app.use(express.static(path.join(__dirname, '../dist')))
app.use(express.static(global.CONSTANTS.UPLOAD_DIST))

自闭中...

总结

要仔细看API
多尝试
不要被惯性思维约束
早点睡

码农的自留地

来源：oschina

链接：https://my.oschina.net/shadowli/blog/3215501

标签

iView

compress

Shadow

博客开发日志(1)

前言

处理图片

处理图片

总结