平时的开发中咱们不免要上传一些网页截图、图片等,传统的选择文件上传使用起来不方便,这里介绍一种使用js和node实现的剪切板黏贴上传图片功能。当咱们须要上传截图时,只需手动截图后commond/ctrl+v便可完成图片上传。这种方式将大大减小咱们在上传图片过程当中花费的时间。javascript
要实现剪切板黏贴上传功能,首先咱们要先能获取到在剪切板中的图片,这里给你们介绍一个很好用的js插件:ImageClipboard。html
ImageClipboard是一款在chrome、firefox和opera上有效的能够将剪切板中的图片黏贴到网页上的工具。java
能够使用bower很简单的安装,若是没有安装bower,请先安装bower,安装使用说明见:[bower:客户端库管理工具]。node
bower install image-clipboard
<div id="box"></div> <script type="text/javascript" src="ImageClipBoard.min.js"></script> <script type="text/javascript"> var clipboard = new ImageClipboard('#box', function (base64) { //do stuff with pasted image }); //onpaste-callback can also be passed as second argument //in the constructor above. clipboard.onpaste = function (base64) { //do stuff with the pasted image }); //you can also pass in single DOM-element instead of //query as the first parameter. </script>
运行以上代码后,div#box中会插入一个img标签,src即为当前剪切板中图片。git
经过ImageClipboard,咱们能够以base64的形式获取到剪切板中的图片,而后将base64数据做为参数经过POST的方式传输到服务器端。github
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数据转为图片存储或者传送到其余服务器。ajax
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); }); }); }
博客文章地址:http://joebon.cc/clipboard-image-uploadchrome
ImageClipboard: https://github.com/jorgenbs/ImageClipboardapi
bower:客户端库管理工具 http://javascript.ruanyifeng.com/tool/bower.html浏览器