平时的开发中我们难免要上传一些网页截图、图片等，传统的选择文件上传使用起来不方便，这里介绍一种使用js和node实现的剪切板黏贴上传图片功能。当我们需要上传截图时，只需手动截图后commond/ctrl+v即可完成图片上传。这种方式将大大减少我们在上传图片过程中花费的时间。

要实现剪切板黏贴上传功能，首先我们要先能获取到在剪切板中的图片，这里给大家介绍一个很好用的js插件：。

ImageClipboard

是一款在chrome、firefox和opera上有效的可以将剪切板中的图片黏贴到网页上的工具。

安装

可以使用bower很简单的安装，如果没有安装bower，请先安装bower,安装使用说明见：[bower：客户端库管理工具]。

bower install image-clipboard

使用：将剪切板中的图片黏贴到网页中去

运行以上代码后，div#box中会插入一个img标签，src即为当前剪切板中图片。

剪切板中图片的获取与上传

通过ImageClipboard，我们可以以base64的形式获取到剪切板中的图片，然后将base64数据作为参数通过POST的方式传输到服务器端。

浏览器端代码：

this.props.clipboard.onpaste = function (base64) {  //do stuff with the pasted image  //console.log(base64)  $.ajax({    url: 'http://localhost:2929/api/upload-img',    dataType: 'JSON',    data: {      imgData: base64},    type: 'POST',    success: function(data) {      console.log(data);    }  });};

服务器端代码

服务器端获取到base64数据，即可将base64数据转为图片存储或者传送到其他服务器。

export default function uploadImg(req, res) {         new Promise((resolve, reject) => {    var fs = require('fs');    var base64Data = req.body.imgData.replace(/^data:image\/png;base64,/, "");    fs.writeFile("out.png", base64Data, 'base64', function(err) {      console.log(err);    });    });}

博客文章地址：

参考资料

1. ImageClipboard:

2. bower：客户端库管理工具