博客折腾记之图片粘贴上传功能

今天开始在给博客一点点的添加功能，首先添加的就是写文章时候的粘贴图片功能。之前没有这个功能，每次想再文章里插一点图片都要先截好图然后上传到服务器，再在文章中手动加入图片地址，着实是非常的麻烦，于是先着手添加了这个粘贴功能，附上实现思路及方法。

我们想要粘贴图片直接上传到服务器，这就需要我们监听一下paste事件，当我们粘贴一个图片文件的时候，我们就调用上传图片的接口将剪切板中的数据发送过去即可。

我们只需要在组件挂载时监听对应dom的paste事件:

这里要注意的是一定要记得在组件销毁时将对应的事件解绑,不然就会多次绑定事件,造成不必要的开销.

为了使图片能正确的在光标位置插入，这里使用了一个addSplitTofield方法，具体实现如下：

后端使用了multer作为中间件来接受传过来的图片，并在正确保存后返回图片的保存地址。

在使用multer的时候要注意以下几点：

• multer在接受文件的时候数据的类型一定要是 FormData
• 要给定指定的key值 key值要和前端添加到formdata中的key值一致 否则multer中间件是无法正确的获取到文件
  
  

这个是multer的配置方法和接口的实现

在multer正确的保存文件后 会在接口的req参数上挂载一个file参数 这时候我们只需要将文件的路径返回给前端即可