vue 實現貼上上傳圖片

實現原理

mounted階段監聽paste事件，貼上板的內容在事件物件event.clipboardData.items中

程式碼實現

mounted() {
  // 監聽貼上事件，上傳圖片
  document.addEventListener('paste', this.handlePaste)
},
methods: {
  handlePaste(event) {
    let items = event.clipboardData && event.clipboardData.items
    let file
    if (items && items.length) {
      // 檢索剪下板items，是個陣列
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile() // file 是剪下板內的圖片檔案
          // TODO: 自行上傳file即可
          break
        }
      }
    }
  }
}