[javascript] elementui和vue下复制粘贴上传图片

前端之家收集整理的这篇文章主要介绍了[javascript] elementui和vue下复制粘贴上传图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

监听事件

mounted() {

        document.addEventListener('paste',this.onPasteUpload)

 }

粘贴的时候组装formData ,下面代码中的文件域name属性是 imagefile,,然后调用jquery的ajax方法传过去 , 后端和普通文件一样就可以 , 返回文件上传后路径

var formData = new FormData();

formData.append('imgfile',file);

 

效果可以直接点击本页面的与我交流 , 粘贴上传一张图片

        //粘贴上传图片
        onPasteUpload(event){
            let items = event.clipboardData && .clipboardData.items;
            let 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()
                    }
                }
            }
            if (!file) {
                return;
            }
            let _this=this;
            var formData = new FormData();
            formData.append(imgfile',file);
            $.ajax({
                url: /uploadimg"post"falseJSONmultipart/form-data
                },error: function (data) {
                    console.log(data);
                }
            });
        }
    },mounted() {
        document.addEventListener(paste',.onPasteUpload)
    },

 

猜你在找的JavaScript相关文章