vue-Ctrl+v粘贴上传剪切板图片

// template
<el-button size="mini" @click="pasteImgUrl" class="pasteBtn" :disabled="pasteBtnDisabled">粘贴截图</el-button>
<el-button size="mini" @click="cancelImgUrl" class="cancelBtn">取消</el-button>

//methods
// 截图粘贴上传缩略图
        pasteImgUrl(){
            var _this = this
            _this.$message({
                type: 'info',
                message: '请按CTRL+V自动上传缩略图',
                duration: 1500
            });
            _this.pasteBtnDisabled = true
            // 监听 ctrl+v键盘事件
            pasteEvent = function (e) {
                if ( !(e.clipboardData && e.clipboardData.items) ) {
                    return;
                }
                for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
                    var item = e.clipboardData.items[i];
                    if (item.kind === "string") {
                        item.getAsString(function (str) {
                            // console.log(str);
                        })
                    } else if (item.kind === "file") {
                        var f= item.getAsFile();
                        let param = new FormData()
                        param.append('file', f)
                        let message = _this.$message({
                            type: 'info',
                            message: '上传中...',
                            duration: 0
                        });
                        _this.$http.post(自己的上传地址, param, {
                            headers: { "Content-Type": "multipart/form-data" },
                            transformRequest: [
                                function(d) {
                                    return d;
                                }
                            ]
                        }).then(res => {
                            if (res.data.code == 200) {
                                _this.subjoinForm.imgUrl = res.data.data.url;
                                message.close()
                                _this.$message({
                                    type: 'success',
                                    message: '上传成功！',
                                    duration: 1000
                                });
                                _this.pasteBtnDisabled = false
                                // 注销当前粘贴的监听
                                document.removeEventListener('paste', pasteEvent)
                            }else{
                                _this.$message({ type: "error", message: '上传失败！' })
                            }
                        });
                    }
                }
            }
            document.addEventListener('paste', pasteEvent)
        },
        // 取消缩略图
        cancelImgUrl(){
            document.removeEventListener('paste', pasteEvent)
            this.pasteBtnDisabled = false
            this.subjoinForm.imgUrl = ''
        },

原文地址