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

唯一Chat

发布于 2020-09-24 15:09:15

1.3K0

发布于 2020-09-24 15:09:15

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

监听事件

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 && event.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',
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'JSON',
                mimeType: "multipart/form-data",
                success: function (res) {

                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
    },
    mounted() {
        document.addEventListener('paste', this.onPasteUpload)
    },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery