Vue 输入框粘贴(Ctrl+V)图片实现上传

<template> <div > <el-input @paste.native="pasteImg($event)" v-model="value" > </el-input> </div> </template> <script type="text/javascript"> export default { mounted() { }, data() { return { value: "", canUpload: true, fileList: [] } }, methods: { pasteImg(event){ //粘贴上传图片 let txt = event.clipboardData.getData('Text') if(typeof(txt) == 'string' && txt !== '') { //检测到是文字,过滤 return ; } let file = null const items = (event.clipboardData || window.clipboardData).items if(items.length) { for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { file = items[i].getAsFile() this.handleChange(file) if (!this.canUpload) { this.canUpload = !this.canUpload; } break } } } }, // 图片上传 handleChange(file) { let formData = new FormData() formData.append('file', file.raw || file) this.postUrl('/www/upload/upload_img', formData).then((response) => { this.fileList.push(response.data) console.log(this.fileList) }, (error) => { console.log(error) }); } } } </script>