图片粘贴上传

2018-07-31 本文已影响7人於風聽語

图片粘贴上传，大家基本都司空见惯了，不足为奇。（本文只是水记一下，有空深挖细耕）

某日产品大大发话：

某：“这个冲账凭证上传，能加个图片粘贴上传功能吗？”
我（凡事一句）：“为什么？”
某：“理由是：用户觉得，截个屏 > 保存到本地 > 选择这个文件上传，太麻烦。直接截图上传，省事。”
我（无力反驳）：“哦，我试试。”

由于用的 iView，先去扒扒有没有 API 提供。文档没有，围观源码，欸，居然写了这么一段代码，upload.vue#L7：

...
@paste="handlePaste"
...
...
handlePaste (e) {
  if (this.paste) {
    this.uploadFiles(e.clipboardData.files);
  }
}
...

但是，为什么凡事都有个但是？人家还没发布 releases...

这种类似的功能，网上搜罗也一大堆。哎呦喂，挺简单的，监听 paste 事件，获取 event 里面的内容就行了。撸起袖子就是干，照着源码画葫芦。
分分钟就搞定了，图片也能上传。然鹅，为什么可粘贴区域这么诡异...

看来 iView 那个也是个半成品，我还是扶墙好了

开始去 MDN 看 paste ，结果寥寥几字，没什么参考性。
梅西表示，我现在慌的一匹...

顺着摸到 W3 的 clipboard-event-paste：
...
The paste action has no effect in a non-editable context, but the paste event fires regardless.
...

表示并没怎么看懂这段英文...

所以，大致意思是，不可编辑的元素，无效？加个属性试试：

<div contenteditable="true" @paste="pasteHandler" ></div>

嗯，现在，只有点击这个 div 才会触发这个 paste 事件。
但是，但是，同时也带来了用户可以随意输入、编辑、粘贴任何内容的问题......

我的内心，时而坚强，时而奔溃...

然后，我想了个搓的方式：

字体设置为 0
子元素 display: none
子元素字体大小为 0

.paste {
        overflow: hidden;
        height: 140px;
        font-size: 0;
        line-height: 140px;
        text-align: center;
        border: 1px dashed #dddee1;
        background-color: #fff;

        /deep/ * {
            display: none !important;
            font-size: 0 !important;
        }

        &:after {
            display: inline-block;
            font-size: 12px;
            content: "点击，粘贴图片上传";
        }
    }

这种方式，就是不显示给你看，倒是非常不优雅的解决了。

不过本身这种交互方式，就感觉怪怪的：

点击一个区域
Ctrl + V 粘贴图片
上传

暂且这样吧，目前木有想到更好的方式。

待我发了个测试版后，发现 FireFox 4.x 不支持。
经测测试，paste 事件有响应。但是 event 里面，files 为空，啊哈哈哈...

偶然发现，其实，浏览器插入富文本到里面了：

再回想到 W3 的 clipboard-event-paste：
...
If the cursor is in an editable context, the paste action will insert clipboard data in the most suitable format (if any) supported for the given context.
...

再读一遍 ...in the most suitable format ...

怎么办呢？

获取 img 元素
读取 base64
base64 转 Blob
Blob 转 File
上传

base64toBlob (base64Data) {
    let byteString

    if (base64Data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(base64Data.split(',')[1])
    } else {
        byteString = unescape(base64Data.split(',')[1])
    }

    const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]
    const ia = new Uint8Array(byteString.length)

    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
    }

    return new Blob([ia], {type:mimeString})
},
hackForFireFox () {
    // 等待 dom 更新
    this.$nextTick(() => {
        const $img = this.$refs.paste.querySelector('img')

        if (!$img) {
            return
        }

        const base64Data = $img.getAttribute('src')
        const blob = this.base64toBlob(base64Data)
        const file = new File([blob], 'image.png')

        this.$refs.paste.innerHTML = '' // 清空上传的图片
        this.$refs.upload.uploadFiles([file])
    })
},
// 粘贴事件处理
pasteHandler (e) {
    // 如果配置了运行粘贴上传
    if (this.paste) {
        // 高版本浏览器，能直接拿到 files
        // 我司不考虑 IE，故未兼容处理
        if (e.clipboardData.files.length > 0) {
            this.$refs.upload.uploadFiles(e.clipboardData.files)
        } else {
            // 否则，尝试读取富文本
            this.hackForFireFox()
        }
    }
}

总结

不是很好的解决方式，踩了几个坑，算是个思路吧。后面有新想法，再补上。

其实，我的内心，是不接受这种方式的...

—— 2018/07/31 By Vinci， Partly Cloudy.

图片粘贴上传

总结

猜你喜欢

热点阅读