绕过浏览器安全之复制粘贴上传图片|小册免费学

1.问题的背景

产品：我们系统的富文本编辑器体验很不友好，不能从word复制编辑图片，帮忙调研一下解决方案
小k：好的,我研究一下（不能回答改不动吧...）
...
小k：因为浏览器的安全限制，目前有两个解决方案，一种是可以批量上传需要后端协助balabala（后端转存）；一种是只允许单张做拷贝至编辑器（前端转存）。
产品：我先试用下市面上主流的编辑器
...
产品：试了下，只要是在word中，点击单张图片--复制的，在公众号、石墨以及禅道上都可以粘贴成功。如果是批量的文+图的不行。我们的是都不行。
产品：那就用你说的第二种前端转存的方案做吧！至少体验会好些，不用先保存至本地再上传！！！
小k：准备coding

2.难点

• 为了用户体验,不能让用户主动上传

js如果在浏览器环境执行，出于安全考虑，需要用户主动进行上传文件操作才能拿到本地文件。如果用户主动上传了，你就可以获得一个file对象，再通过FileReader进行读取就好了。（nodejs可以读，浏览器环境是读不了的，浏览器怎么敢给网页那么大的权利，网页脚本能读文件，那是相当危险的。所以只能读input选择的文件。）

• 无法批量获取剪切板图片（暂时没找到解决方案）

因为复制的只能复制一张图片！多文件复制，复制的是文件的路径 而不是文件对象

2.解决的方式

1）监听粘贴事件

document.addEventListener('paste', function (event) {
    var items = event.clipboardData && event.clipboardData.items;
    var file = null;
    if (items && items.length) {
        // 检索剪切板items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                file = items[i].getAsFile();
                break;
            }
        }
    }
    // 此时file就是剪切板中的图片文件
});

2）上传

不管我们选择使用base64还是formData，在得到了数据后接下来要做的就是上传，对于base64的上传这里就不做演示了，这里仅演示一下formData的上传，其实都一样，实现代码：

var formData = new FormData();
formData.append('file', file);

// 其他些参数，例如session_id
formData.append('session_id', 1);

// ajax上传
var xhr = new XMLHttpRequest();

// 上传结束
xhr.onload = function () {
    var json = JSON.parse(xhr.responseText);
    // ... 这里处理返回的json数据
};

xhr.open('POST', './upload_path.com', true);
xhr.send(formData);

3）以上就是读取文件上传，接下就是使用服务器返回的图片路径替换编辑器img，这边就不写业务代码了。

参考：

• www.zhangxinxu.com/wordpress/2…
• blog.csdn.net/lianghecai5…
• segmentfault.com/a/119000000…

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情