鍍金池/ 問答/網(wǎng)絡(luò)安全/ 網(wǎng)頁版的聊天怎么實(shí)現(xiàn)圖片的發(fā)送,類似于微信的網(wǎng)頁版

網(wǎng)頁版的聊天怎么實(shí)現(xiàn)圖片的發(fā)送,類似于微信的網(wǎng)頁版

用 react做的一個(gè)項(xiàng)目,網(wǎng)站上要求可以跟別的人在線上交流
用websocket發(fā)送消息,后端和websocket發(fā)送都沒有問題,僅僅發(fā)送文本消息也可以實(shí)現(xiàn),
問題是前端不知道怎么實(shí)現(xiàn)圖片的發(fā)送?
比如怎么能把圖片拖到消息框的時(shí)候,松開鼠標(biāo)圖片就能直接上傳,
圖片描述
或者復(fù)制一張圖片在輸入框就會顯示一張是否要送的圖片,
圖片描述
或者點(diǎn)擊上傳按鈕選擇完一張圖片之后圖片就會在消息框顯示正在加載上傳中
圖片描述

有沒有大神知道這要怎么實(shí)現(xiàn)?。?/p>

回答
編輯回答
舊時(shí)光

拖拽使用html5的drag相關(guān)時(shí)間就可以了
復(fù)制圖片 發(fā)送的話 使用 onpaste事件監(jiān)聽 可以從剪貼板里面讀取出來

2017年7月8日 10:17
編輯回答
別傷我

首先通過file加載到瀏覽器,然后通過流傳到服務(wù)器,服務(wù)器只是中轉(zhuǎn)作用,傳給指定的另一端

2017年10月8日 22:56