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

作者：kiss雪夜

文章源地址：https://www.cnblogs.com/yummylucky/p/12722891.html

 

 

// mounted 
 document.addEventListener('paste', this.getClipboardFiles)
  
  
// methods
      getClipboardFiles (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) {
         this.$message.error('粘贴内容不是图片')
         return;
       }
       this.handleFilesAdd(file)
     }

 

本文借鉴：https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/

 

使用方法：将mounted下面那行代码放在mounted函数中。将methods下面的代码复制粘贴到methods中。

注意：如果你使用了elementUI并且引入了message组件，可直接使用。如果不是，拿掉this.$message这句话。