基于antd + vue实现的复制粘贴上传图片

简单实现下如何在网页中复制一张图片然后粘贴到输入框里面上传图片到服务器里。

视图部分代码

• 这里我用的是antd的input组件用别的组件库或者原生的都行.

<a-input @paste="pasteUpload($event)" placeholder="复制图片，直接在此输入框ctrl+v粘贴"></a-input>

逻辑部分代码

pasteUpload(e){
    // 兼容浏览器
    if (!(e.clipboardData && e.originalEvent.clipboardData && window.clipboardData)) {
        // 提示说明，此浏览器不支持此操作
        this.$message.error('当前浏览器不支持粘贴上传操作！');
        return;
    }
    var clipboardData = (e.clipboardData || e.originalEvent.clipboardData || window.clipboardData);
    var items = clipboardData.items;
    let file = null;
    // 搜索剪切板items
    for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
    }
    if (file) {
        e.preventDefault();
        let param = new FormData();
        param.append('file', file);
        let { res, data } = request('/xx/xx',param);
        if (res === 0) {
          this.fileList = data.image_url;
        }
        this.isUpload = false;
    } else {
        error('请粘贴正确图片')
    }
}