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这句话。

原文地址:https://www.cnblogs.com/yummylucky/p/12722891.html