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這句話。