vue 前端复制粘贴方式上传图片

1,039 阅读1分钟
<template>
    <div @paste="onPaste">
        在此粘贴图片
    </div>
</template>

// methods中
methods: {
    async onPaste(e) {
        const items = e.clipboardData.items;        
        if (!items || items.length === 0) {          
            console.error('当前浏览器不支持粘贴');          
            return;        
        }
        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) {          
            this.$message.error('粘贴内容非图片');          
            return;        
        }
        const reader = new FileReader();        
        reader.onload = async e => {          
            reader.readAsDataURL(file);        
        };
        let form = new FormData();        
        form.append('file', file);        
        form.append('xxx', 'yyy'); // 可以添加任意其他参数        
        const { res } = await uploadFile(form); // 上传到服务器,uploadFile为上传接口    
    }
}