如何在Chrome粘貼圖片直接上傳

背景

截圖或頁面複製圖片，可以直接通過Ctrl+v 粘貼上傳圖片

原理

操作：複製（截圖）=>粘貼=>上傳

監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳

瀏覽器：Chrome、IE11

Chrome瀏覽器

1、通過監聽粘貼事件，event有clipboardData屬性，且clipboardData有item屬性

2、獲取剪切板的base64編碼字元串，傳到後臺伺服器

3、伺服器獲取到base64編碼字元串轉化為圖片保存伺服器

4、前臺獲取圖片名並展示

IE11

1、IE11是沒有event有clipboardData屬性的，所以不能直接獲取base64編碼字元串

2、頁面放置一個帶有contenteditable屬性的div容器，用於接收IE粘貼的圖片，PS：IE粘貼事件需要在設置了contenteditable屬性的div粘貼才會觸發

3、當進行粘貼操作，讓焦點在div容器中，這時粘貼事件才會觸發，DIV中直接生成IMG

4、從IMG中src獲取base64編碼字元串，傳到後臺伺服器

5、伺服器獲取到base64編碼字元串轉化為圖片保存伺服器

6、前臺獲取圖片名並展示

註意點：Chrome和IE11 觸發paste事件的區別

1、Chrome無論在哪進行粘貼，均可觸發paste事件
2、IE11只能在div中觸發paste事件